{% load static i18n user_admin_tags %}
{% with ns=request.resolver_match.namespace url_name=request.resolver_match.url_name %}
<style>
  /*
   * REP dropdown sizing — each visible column is a fixed 16rem (256px) so
   * titles never wrap and descriptions have predictable 2-line space. The
   * panel total width = N columns × 16rem + gaps + padding, so it scales by
   * the items the user sees (1/2/3 columns by role).
   */
  .rep-dropdown-grid a > div:last-child > p:first-child {
    white-space: nowrap;
  }
  .rep-dropdown-grid a > div:last-child > p:nth-child(2) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
<header
  class="sticky top-0 z-40 h-14 w-full bg-ruforum-topbar"
  style="border-bottom: 1px solid rgba(255,255,255,0.12);"
  x-data="{
    mobileOpen: false,
    activeMenu: null,
    _closeTimer: null,
    openMenu(name)  { clearTimeout(this._closeTimer); this.activeMenu = name; },
    closeMenu()     { this._closeTimer = setTimeout(() => { this.activeMenu = null; }, 150); },
    toggleMenu(name){ clearTimeout(this._closeTimer); this.activeMenu = this.activeMenu === name ? null : name; }
  }"
  @keydown.escape.window="activeMenu = null; mobileOpen = false"
  @click="if ($event.target.closest('a[href]:not([href^=\'#\'])')) { clearTimeout(_closeTimer); activeMenu = null; mobileOpen = false; }"
>
  <div class="mx-auto flex h-full w-full max-w-7xl items-center px-6">

    {# ── Brand ──────────────────────────────────── #}
    <a
      href="{% url 'core:dashboard' %}"
      class="mr-3 flex shrink-0 items-center gap-2.5 rounded-lg px-1.5 py-1 transition-colors hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/40"
    >
      <img src="{% static 'img/brand/favicon.png' %}" alt="RUFORUM" class="h-8 w-auto object-contain brightness-0 invert" aria-hidden="true">
      <div class="hidden leading-tight sm:block">
        <span class="block font-display text-sm font-bold text-white">IILMP</span>
        <span class="block font-meta text-[8px] uppercase tracking-[0.2em] text-white/40">RUFORUM</span>
      </div>
    </a>

    <div class="mx-2 hidden h-4 w-px bg-white/15 md:block" aria-hidden="true"></div>

    {# ── Desktop Navigation ──────────────────────── #}
    <nav class="hidden flex-1 items-center gap-0.5 md:flex" aria-label="Primary">

      <a href="{% url 'core:dashboard' %}"
         class="flex items-center rounded-lg px-3 py-1.5 text-sm font-medium transition-colors
                {% if url_name == 'dashboard' %}bg-white/15 text-white{% else %}text-white/70 hover:bg-white/10 hover:text-white{% endif %}">
        Dashboard
      </a>

      {% if user.is_authenticated %}

      {% if nav_show_rims %}
      {# RIMS dropdown #}
      <div class="relative" @mouseenter="openMenu('rims')" @mouseleave="closeMenu()">
        <button type="button" @click="toggleMenu('rims')" :aria-expanded="activeMenu === 'rims'"
          class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors
                 {% if ns == 'rims_grants' or ns == 'rims_operations' or ns == 'rims_finance' or ns == 'rims_projects' or ns == 'rims_scholarships' %}bg-white/15 text-white{% else %}text-white/70 hover:bg-white/10 hover:text-white{% endif %}">
          RIMS
          <svg class="h-3 w-3 text-white/40 transition-transform duration-150" :class="activeMenu === 'rims' && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
          </svg>
        </button>

        {# RIMS Panel #}
        <div x-show="activeMenu === 'rims'" x-cloak
          x-transition:enter="transition ease-out duration-100"
          x-transition:enter-start="opacity-0 -translate-y-1"
          x-transition:enter-end="opacity-100 translate-y-0"
          x-transition:leave="transition ease-in duration-75"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
          class="absolute left-0 top-full z-50 mt-1.5 rounded-xl bg-white shadow-dropdown"
          style="border: 1px solid rgba(196,180,154,0.5); padding: 20px; width: max-content; max-width: 92vw;">

          {# 3-column layout when the user can see Col 2 (Finance) and Col 3 (Ops/Projects/Scholarships); 2 columns when only Col 2 visible; 1 column for Grants-only viewers. #}
          <div class="grid gap-x-5"
            style="grid-template-columns: {% if nav_rims_finance_only %}minmax(0,1fr){% elif perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'finance_officer' or user.role == 'grants_manager' or user.role == 'auditor' or user.role == 'scholar' or user.role == 'system_admin' or user.role == 'finance_manager' or user.role == 'program_coordinator' or user.role == 'project_manager' %}{% if perms.rims_grants.manage_operations or perms.rims_grants.manage_projects or perms.rims_grants.manage_scholarships or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'project_manager' or user.role == 'scholar' or user.role == 'finance_officer' %}minmax(0,1fr) minmax(0,1fr) minmax(0,1fr){% else %}minmax(0,1fr) minmax(0,1fr){% endif %}{% else %}minmax(0,1fr){% endif %}; min-width: {% if nav_rims_finance_only %}16rem{% elif perms.rims_grants.manage_finance or perms.rims_grants.manage_operations or perms.rims_grants.manage_projects or perms.rims_grants.manage_scholarships or user.role in 'admin,grants_manager,finance_officer,scholar' %}56rem{% else %}auto{% endif %};">

            {# Column 1 — Grants + Funding. Hidden for finance-only viewers
               (Program Coordinator): their RIMS remit is budgets, not grants. #}
            {% if not nav_rims_finance_only %}
            <div>
              <p class="mb-3 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Grants</p>
              <div class="space-y-0.5">

                {% if not perms.rims_grants.manage_calls and user.role != 'admin' and user.role != 'grants_manager' %}
                <a href="{% url 'rims_grants:call_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'call_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'call_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'call_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'call_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Open calls</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Browse active funding opportunities</p>
                  </div>
                </a>

                <a href="{% url 'rims_grants:application_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'application_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'application_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'application_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'application_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">My applications</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Track your submitted applications</p>
                  </div>
                </a>
                {% endif %}

                {% if perms.rims_grants.review_applications or perms.rims_grants.manage_calls or user.role == 'reviewer' or user.role == 'admin' or user.role == 'grants_manager' %}
                <a href="{% url 'rims_grants:review_queue' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'review_queue' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'review_queue' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'review_queue' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'review_queue' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Review queue</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Score and recommend applications</p>
                  </div>
                </a>
                {% endif %}

                {% if perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'programme_officer' %}
                <a href="{% url 'rims_grants:manager_call_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'manager_call_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'manager_call_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'manager_call_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'manager_call_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Calls</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Manage grant call cycles</p>
                  </div>
                </a>

                <a href="{% url 'rims_grants:manager_all_applications' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'manager_all_applications' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'manager_all_applications' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'manager_all_applications' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'manager_all_applications' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Applications</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">All grant submissions</p>
                  </div>
                </a>

                <a href="{% url 'rims_grants:award_dashboard' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'award_dashboard' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'award_dashboard' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'award_dashboard' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'award_dashboard' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Awards</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Disbursed award records</p>
                  </div>
                </a>

                <a href="{% url 'rims_grants:application_archive_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'application_archive_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'application_archive_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'application_archive_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'application_archive_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Archive</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Rejected / withdrawn applications</p>
                  </div>
                </a>
                {% endif %}

              </div>

              {# Funding subsection — funding records, approval queue, donors, strategic objectives #}
              {% if perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'program_director' or user.role == 'finance_director' or user.role == 'system_admin' or user.role == 'finance_manager' or user.role == 'program_coordinator' %}
              <p class="mb-3 mt-5 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Funding</p>
              <div class="space-y-0.5">
                {% if perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'program_director' or user.role == 'finance_director' or user.role == 'finance_manager' or user.role == 'program_coordinator' %}
                <a href="{% url 'rims_grants:funding_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'funding_list' or url_name == 'funding_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'funding_list' or url_name == 'funding_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'funding_list' or url_name == 'funding_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'funding_list' or url_name == 'funding_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Funding records</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Donor-to-award funding stream</p>
                  </div>
                </a>
                {% endif %}

                {% if user.role == 'admin' or user.role == 'system_admin' or user.role == 'program_director' or user.role == 'finance_director' %}
                <a href="{% url 'rims_grants:funding_approval_queue' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'funding_approval_queue' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'funding_approval_queue' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'funding_approval_queue' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'funding_approval_queue' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Approval queue</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Awaiting director sign-off</p>
                  </div>
                </a>
                {% endif %}

                {% if perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' %}
                <a href="{% url 'rims_operations:donor_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'donor_list' or url_name == 'donor_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'donor_list' or url_name == 'donor_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'donor_list' or url_name == 'donor_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 11.25v8.25a1.5 1.5 0 01-1.5 1.5H5.25a1.5 1.5 0 01-1.5-1.5v-8.25M12 4.875A2.625 2.625 0 109.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1114.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'donor_list' or url_name == 'donor_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Donors</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Funder registry + contributions</p>
                  </div>
                </a>

                <a href="{% url 'rims_operations:strategic_objective_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'strategic_objective_list' or url_name == 'strategic_objective_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'strategic_objective_list' or url_name == 'strategic_objective_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'strategic_objective_list' or url_name == 'strategic_objective_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'strategic_objective_list' or url_name == 'strategic_objective_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Strategic objectives</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Programme alignment + KPIs</p>
                  </div>
                </a>
                {% endif %}
              </div>
              {% endif %}

            </div>
            {% endif %}{# /Column 1 hidden when nav_rims_finance_only #}

            {# Column 2 — Finance (full column dedicated; Operations / Projects / Scholarships split into Col 3) #}
            {% if perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or perms.rims_grants.manage_projects or perms.rims_grants.manage_scholarships or user.role == 'admin' or user.role == 'finance_officer' or user.role == 'grants_manager' or user.role == 'auditor' or user.role == 'scholar' or user.role == 'system_admin' or user.role == 'finance_manager' or user.role == 'program_coordinator' or user.role == 'project_manager' %}
            <div>

              {% if perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'finance_officer' or user.role == 'grants_manager' or user.role == 'auditor' or user.role == 'system_admin' or user.role == 'finance_manager' or user.role == 'program_coordinator' or user.role == 'project_manager' %}
              <p class="mb-3 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Finance</p>
              <div class="space-y-0.5">
                {% if perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'finance_officer' or user.role == 'grants_manager' or user.role == 'finance_manager' or user.role == 'program_coordinator' or user.role == 'project_manager' %}
                <a href="{% url 'rims_finance:budget_overview' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'budget_overview' or url_name == 'budget_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'budget_overview' or url_name == 'budget_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'budget_overview' or url_name == 'budget_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'budget_overview' or url_name == 'budget_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Budgets</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Allocate grant funds</p>
                  </div>
                </a>

                <a href="{% url 'rims_finance:disbursement_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'disbursement_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'disbursement_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'disbursement_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'disbursement_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Disbursements</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Process fund transfers</p>
                  </div>
                </a>

                <a href="{% url 'rims_finance:payment_batch_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'payment_batch_list' or url_name == 'payment_batch_detail' or url_name == 'payment_batch_create' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'payment_batch_list' or url_name == 'payment_batch_detail' or url_name == 'payment_batch_create' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'payment_batch_list' or url_name == 'payment_batch_detail' or url_name == 'payment_batch_create' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'payment_batch_list' or url_name == 'payment_batch_detail' or url_name == 'payment_batch_create' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Payment batches</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Group payments for execution</p>
                  </div>
                </a>

                <a href="{% url 'rims_finance:analytics_dashboard' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'analytics_dashboard' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'analytics_dashboard' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'analytics_dashboard' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'analytics_dashboard' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Variance analytics</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Spend vs project pacing</p>
                  </div>
                </a>

                <a href="{% url 'rims_finance:donor_report_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'donor_report_list' or url_name == 'donor_report_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'donor_report_list' or url_name == 'donor_report_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'donor_report_list' or url_name == 'donor_report_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'donor_report_list' or url_name == 'donor_report_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Donor reports</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Per-funder roll-up + CSV</p>
                  </div>
                </a>

                <a href="{% url 'rims_finance:expenditure_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'expenditure_list' or url_name == 'expenditure_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'expenditure_list' or url_name == 'expenditure_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'expenditure_list' or url_name == 'expenditure_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 14.25l6-6m4.5-3.493V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185zM9.75 9h.008v.008H9.75V9zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm4.125 6h.008v.008h-.008V15zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'expenditure_list' or url_name == 'expenditure_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Expenditures</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Itemised spend ledger</p>
                  </div>
                </a>

                {# PRD §5.4 FRFM046/048/049 — GL register (6F). Read for all finance staff. #}
                <a href="{% url 'rims_finance:gl_register' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'gl_register' or url_name == 'gl_entry_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'gl_register' or url_name == 'gl_entry_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'gl_register' or url_name == 'gl_entry_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h12A2.25 2.25 0 0020.25 14.25V3M3.75 21h16.5M5.625 6h12.75M5.625 9h12.75M5.625 12h12.75"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'gl_register' or url_name == 'gl_entry_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">GL register</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Double-entry ledger rows</p>
                  </div>
                </a>

                {# PRD §5.4 FRFM048 — bank statements (6F). #}
                <a href="{% url 'rims_finance:bank_statement_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'bank_statement_list' or url_name == 'bank_statement_detail' or url_name == 'bank_statement_upload' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'bank_statement_list' or url_name == 'bank_statement_detail' or url_name == 'bank_statement_upload' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'bank_statement_list' or url_name == 'bank_statement_detail' or url_name == 'bank_statement_upload' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18 9 11.25l4.306 4.306a11.95 11.95 0 0 1 5.814-5.518l2.74-1.22m0 0-5.94-2.281m5.94 2.28-2.28 5.941"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'bank_statement_list' or url_name == 'bank_statement_detail' or url_name == 'bank_statement_upload' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Bank statements</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Upload + reconcile lines</p>
                  </div>
                </a>

                {# PRD §5.4 FRFM042/043 — payment retry queue (6E). #}
                <a href="{% url 'rims_finance:payment_retry_queue' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'payment_retry_queue' or url_name == 'payment_retry_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'payment_retry_queue' or url_name == 'payment_retry_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'payment_retry_queue' or url_name == 'payment_retry_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'payment_retry_queue' or url_name == 'payment_retry_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Payment retries</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Failed-payment recovery queue</p>
                  </div>
                </a>

                {# PRD §5.4 FRFM008 — exchange-rate roster (6B). #}
                <a href="{% url 'rims_finance:exchange_rate_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'exchange_rate_list' or url_name == 'exchange_rate_create' or url_name == 'exchange_rate_edit' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'exchange_rate_list' or url_name == 'exchange_rate_create' or url_name == 'exchange_rate_edit' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'exchange_rate_list' or url_name == 'exchange_rate_create' or url_name == 'exchange_rate_edit' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'exchange_rate_list' or url_name == 'exchange_rate_create' or url_name == 'exchange_rate_edit' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Exchange rates</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">FX reference roster</p>
                  </div>
                </a>

                {# PRD §5.4 FRFM012/013/015 — approval-workflow config (6C). Manager-only. #}
                {% if user.role == 'admin' or user.role == 'finance_manager' or user.role == 'finance_director' or user.role == 'system_admin' %}
                <a href="{% url 'rims_finance:approval_workflow_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'approval_workflow_list' or url_name == 'approval_workflow_create' or url_name == 'approval_workflow_edit' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'approval_workflow_list' or url_name == 'approval_workflow_create' or url_name == 'approval_workflow_edit' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'approval_workflow_list' or url_name == 'approval_workflow_create' or url_name == 'approval_workflow_edit' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'approval_workflow_list' or url_name == 'approval_workflow_create' or url_name == 'approval_workflow_edit' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Approval workflows</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Line/total + two-eyes config</p>
                  </div>
                </a>
                {% endif %}
                {% endif %}

                {% if user.role == 'auditor' or user.role == 'admin' or user.role == 'system_admin' %}
                <a href="{% url 'rims_finance:approval_telemetry' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'approval_telemetry' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'approval_telemetry' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'approval_telemetry' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'approval_telemetry' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Approval telemetry</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Read-only SOD evidence</p>
                  </div>
                </a>
                {% endif %}

                {% if user.role == 'auditor' or user.role == 'admin' or user.role == 'system_admin' %}
                <a href="{% url 'rims_operations:audit_log' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'audit_log' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'audit_log' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'audit_log' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'audit_log' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Audit log</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Read-only event trail</p>
                  </div>
                </a>
                <a href="{% url 'rims_operations:archived_awards' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'archived_awards' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'archived_awards' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'archived_awards' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'archived_awards' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Archived awards</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Closed awards past retention window</p>
                  </div>
                </a>
                {% endif %}
              </div>
              {% endif %}

              {# Operations / Projects / Scholarships moved into Column 3 below. #}
            </div>
            {% endif %}

            {# Column 3 — Operations / Projects / Scholarships (and scholar self-service) #}
            {% if perms.rims_grants.manage_operations or perms.rims_grants.manage_calls or perms.rims_grants.manage_projects or perms.rims_grants.manage_scholarships or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'finance_officer' or user.role == 'project_manager' or user.role == 'scholar' or user.role == 'system_admin' %}
            <div>

              {% if perms.rims_grants.manage_operations or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' %}
              <p class="mb-3 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Operations</p>
              <div class="space-y-0.5">
                <a href="{% url 'rims_operations:partner_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'partner_list' or url_name == 'partner_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'partner_list' or url_name == 'partner_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'partner_list' or url_name == 'partner_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'partner_list' or url_name == 'partner_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Partners</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Partner organisations</p>
                  </div>
                </a>

                <a href="{% url 'rims_operations:institution_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'institution_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'institution_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'institution_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'institution_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Institutions</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">University registry</p>
                  </div>
                </a>

                <a href="{% url 'rims_operations:mou_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'mou_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'mou_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'mou_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'mou_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">MOUs</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Partnership agreements</p>
                  </div>
                </a>
              </div>
              {% endif %}

              {% if perms.rims_grants.manage_projects or perms.rims_grants.manage_calls or perms.rims_grants.manage_finance or user.role == 'admin' or user.role == 'finance_officer' or user.role == 'grants_manager' or user.role == 'project_manager' %}
              <p class="mb-3 mt-5 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Projects</p>
              <div class="space-y-0.5">
                <a href="{% url 'rims_projects:project_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'project_list' or url_name == 'project_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'project_list' or url_name == 'project_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'project_list' or url_name == 'project_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'project_list' or url_name == 'project_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">All projects</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Funded project portfolio</p>
                  </div>
                </a>

                <a href="{% url 'rims_projects:milestone_compliance' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'milestone_compliance' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'milestone_compliance' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'milestone_compliance' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'milestone_compliance' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Milestone compliance</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Overdue + at-risk milestones</p>
                  </div>
                </a>
              </div>
              {% endif %}

              {% if perms.rims_grants.manage_scholarships or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'finance_officer' or user.role == 'scholar' %}
              <p class="mb-3 mt-5 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Scholarships</p>
              <div class="space-y-0.5">
                {% if perms.rims_grants.manage_scholarships or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' %}
                <a href="{% url 'rims_scholarships:officer_dashboard' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'officer_dashboard' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'officer_dashboard' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'officer_dashboard' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'officer_dashboard' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Officer dashboard</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Pipeline + overdue reports</p>
                  </div>
                </a>

                <a href="{% url 'rims_scholarships:scholarship_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'scholarship_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'scholarship_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'scholarship_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'scholarship_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Programmes</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Scholarship programme setup</p>
                  </div>
                </a>

                <a href="{% url 'rims_scholarships:scholar_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'scholar_list' or url_name == 'scholar_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'scholar_list' or url_name == 'scholar_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'scholar_list' or url_name == 'scholar_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'scholar_list' or url_name == 'scholar_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Scholars</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Enrolled scholar records</p>
                  </div>
                </a>
                {% endif %}

                {% if perms.rims_grants.manage_scholarships or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'finance_officer' %}
                <a href="{% url 'rims_scholarships:stipend_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'stipend_list' or url_name == 'stipend_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'stipend_list' or url_name == 'stipend_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'stipend_list' or url_name == 'stipend_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'stipend_list' or url_name == 'stipend_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Stipends</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Scholar payment runs</p>
                  </div>
                </a>
                {% endif %}

                {% if user.role == 'scholar' %}
                <a href="{% url 'rims_scholarships:my_scholarships' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if url_name == 'my_scholarships' or url_name == 'my_scholarship_detail' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if url_name == 'my_scholarships' or url_name == 'my_scholarship_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if url_name == 'my_scholarships' or url_name == 'my_scholarship_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if url_name == 'my_scholarships' or url_name == 'my_scholarship_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">My scholarships</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Your awards + progress reports</p>
                  </div>
                </a>
                {% endif %}
              </div>
              {% endif %}
            </div>
            {% endif %}

          </div>
        </div>
      </div>
      {% endif %}{# nav_show_rims #}

      {# REP dropdown — 3-column layout: Learning / Community / Manage. #}
      {# Learning now lives in Moodle — this links out to the Moodle site. #}
      {% if nav_show_rep %}
      <a href="{{ moodle_learning_url|default:moodle_url }}" target="_blank" rel="noopener"
         class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-white/70 transition-colors hover:bg-white/10 hover:text-white">
        {% translate "Learning" %}
        <svg class="h-3 w-3 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
        </svg>
      </a>
      {% endif %}{# nav_show_rep — Learning links out to Moodle #}

      {# Repository dropdown #}
      {% if nav_show_repository %}
      <div class="relative" @mouseenter="openMenu('repository')" @mouseleave="closeMenu()">
        <button type="button" @click="toggleMenu('repository')" :aria-expanded="activeMenu === 'repository'"
          class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors
                 {% if ns == 'repo_documents' or ns == 'repo_search' or ns == 'repo_analytics' or ns == 'repo_integration' %}bg-white/15 text-white{% else %}text-white/70 hover:bg-white/10 hover:text-white{% endif %}">
          Repository
          <svg class="h-3 w-3 text-white/40 transition-transform duration-150" :class="activeMenu === 'repository' && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
          </svg>
        </button>

        {# Repository panel #}
        <div x-show="activeMenu === 'repository'" x-cloak
          x-transition:enter="transition ease-out duration-100"
          x-transition:enter-start="opacity-0 -translate-y-1"
          x-transition:enter-end="opacity-100 translate-y-0"
          x-transition:leave="transition ease-in duration-75"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
          class="absolute left-0 top-full z-50 mt-1.5 rounded-xl bg-white shadow-dropdown"
          style="border: 1px solid rgba(196,180,154,0.5); padding: 20px; width: max-content; max-width: 92vw;">

          <div class="grid gap-x-6"
               style="grid-template-columns: {% if nav_repo_manage or nav_repo_qa or nav_repo_analytics %}1fr 1fr{% else %}1fr{% endif %};">

            {# ── Column 1 — Discover (and Contribute below for authenticated) ── #}
            <div>
              <p class="mb-3 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Discover</p>
              <div class="space-y-0.5">
                <a href="{% url 'repo_documents:browse' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_documents' and url_name == 'browse' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_documents' and url_name == 'browse' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_documents' and url_name == 'browse' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_documents' and url_name == 'browse' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Browse</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">All published documents</p>
                  </div>
                </a>

                <a href="{% url 'repo_search:search' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_search' and url_name == 'search' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_search' and url_name == 'search' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_search' and url_name == 'search' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_search' and url_name == 'search' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Search</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Full-text across the archive</p>
                  </div>
                </a>

                <a href="{% url 'repo_search:advanced' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_search' and url_name == 'advanced' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_search' and url_name == 'advanced' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_search' and url_name == 'advanced' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_search' and url_name == 'advanced' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Advanced search</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Filter by author, year, ORCID</p>
                  </div>
                </a>

                <a href="{% url 'repo_documents:collection_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_documents' and url_name == 'collection_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_documents' and url_name == 'collection_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_documents' and url_name == 'collection_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.5A.75.75 0 014.5 3.75h15a.75.75 0 010 1.5h-15a.75.75 0 01-.75-.75zM3.75 9A.75.75 0 014.5 8.25h15a.75.75 0 010 1.5h-15A.75.75 0 013.75 9zm0 4.5a.75.75 0 01.75-.75h15a.75.75 0 010 1.5h-15a.75.75 0 01-.75-.75zm0 4.5a.75.75 0 01.75-.75h15a.75.75 0 010 1.5h-15a.75.75 0 01-.75-.75z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_documents' and url_name == 'collection_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Collections</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Theses, briefs, datasets &amp; more</p>
                  </div>
                </a>
              </div>

              {% if user.is_authenticated %}
              {# Contribute subsection — stacks under Discover within the same column #}
              <p class="mb-3 mt-5 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Contribute</p>
              <div class="space-y-0.5">
                <a href="{% url 'repo_documents:submit' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_documents' and url_name == 'submit' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_documents' and url_name == 'submit' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_documents' and url_name == 'submit' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_documents' and url_name == 'submit' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Submit document</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Upload for QA and publication</p>
                  </div>
                </a>

                <a href="{% url 'repo_documents:saved_search_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_documents' and url_name == 'saved_search_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_documents' and url_name == 'saved_search_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_documents' and url_name == 'saved_search_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_documents' and url_name == 'saved_search_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Saved searches</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Alerts for matching documents</p>
                  </div>
                </a>
              </div>
              {% endif %}
            </div>

            {# ── Column 2 — Manage / Review / Analytics (management tier; QA queue also for reviewers / publication assistants; Analytics also for M&E officers) ── #}
            {% if nav_repo_manage or nav_repo_qa or nav_repo_analytics %}
            <div>
              {% if nav_repo_manage or nav_repo_qa %}
              <p class="mb-3 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">{% if nav_repo_manage %}Manage{% else %}Review{% endif %}</p>
              <div class="space-y-0.5">
                <a href="{% url 'repo_documents:qa_queue' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_documents' and url_name == 'qa_queue' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_documents' and url_name == 'qa_queue' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_documents' and url_name == 'qa_queue' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_documents' and url_name == 'qa_queue' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">QA queue</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Pending submissions to review</p>
                  </div>
                </a>

                {% if nav_repo_manage %}
                <a href="{% url 'repo_documents:access_request_queue' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_documents' and url_name == 'access_request_queue' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_documents' and url_name == 'access_request_queue' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_documents' and url_name == 'access_request_queue' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-3.75 11.25h16.5a1.5 1.5 0 001.5-1.5V12a1.5 1.5 0 00-1.5-1.5H3.75a1.5 1.5 0 00-1.5 1.5v8.25a1.5 1.5 0 001.5 1.5z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_documents' and url_name == 'access_request_queue' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Access requests</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Approve restricted downloads</p>
                  </div>
                </a>

                <a href="{% url 'repo_documents:keyword_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_documents' and url_name == 'keyword_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_documents' and url_name == 'keyword_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_documents' and url_name == 'keyword_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"/>
                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_documents' and url_name == 'keyword_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Keywords</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Approve suggested keywords</p>
                  </div>
                </a>

                <a href="{% url 'repo_documents:access_violation_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_documents' and url_name == 'access_violation_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_documents' and url_name == 'access_violation_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_documents' and url_name == 'access_violation_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0 3.75h.008v.008H12v-.008zM3.598 6A11.99 11.99 0 0012 3.036 11.959 11.959 0 0020.402 6c.388 1.18.598 2.44.598 3.749 0 5.592-3.824 10.29-9 11.623-5.176-1.332-9-6.03-9-11.622 0-1.31.21-2.571.598-3.751z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_documents' and url_name == 'access_violation_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Access violations</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Denied access &amp; download attempts</p>
                  </div>
                </a>
                {% endif %}{# nav_repo_manage #}
              </div>
              {% endif %}{# nav_repo_manage or nav_repo_qa — Manage/Review subsection #}

              {% if nav_repo_analytics %}
              <p class="mb-3 {% if nav_repo_manage or nav_repo_qa %}mt-5 {% endif %}font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Analytics</p>
              <div class="space-y-0.5">
                <a href="{% url 'repo_analytics:usage_dashboard' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_analytics' and url_name == 'usage_dashboard' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_analytics' and url_name == 'usage_dashboard' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_analytics' and url_name == 'usage_dashboard' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_analytics' and url_name == 'usage_dashboard' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Usage dashboard</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Downloads, views, top queries</p>
                  </div>
                </a>

                <a href="{% url 'repo_analytics:ai_insights' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_analytics' and url_name == 'ai_insights' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_analytics' and url_name == 'ai_insights' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_analytics' and url_name == 'ai_insights' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_analytics' and url_name == 'ai_insights' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">AI insights</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">LangChain research trends</p>
                  </div>
                </a>

                <a href="{% url 'repo_analytics:compliance' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_analytics' and url_name == 'compliance' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_analytics' and url_name == 'compliance' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_analytics' and url_name == 'compliance' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_analytics' and url_name == 'compliance' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">OA compliance</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Open Access rate by collection</p>
                  </div>
                </a>

                <a href="{% url 'repo_analytics:integration_status' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'repo_analytics' and url_name == 'integration_status' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'repo_analytics' and url_name == 'integration_status' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'repo_analytics' and url_name == 'integration_status' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"/>
                    </svg>
                  </div>
                  <div>
                    <p class="text-sm font-medium {% if ns == 'repo_analytics' and url_name == 'integration_status' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Integration status</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">RIMS, M&amp;EL, REP, SME-Hub events</p>
                  </div>
                </a>
              </div>
              {% endif %}{# nav_repo_analytics — Analytics #}
            </div>
            {% endif %}

          </div>
        </div>
      </div>

      {% endif %}{# nav_show_repository #}

  
      {% if nav_show_mel %}
      <div class="relative" @mouseenter="openMenu('mel')" @mouseleave="closeMenu()">
        <button type="button" @click="toggleMenu('mel')" :aria-expanded="activeMenu === 'mel'"
          class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors
                 {% if ns == 'mel_indicators' or ns == 'mel_tracking' or ns == 'mel_reports' or ns == 'mel_feedback' %}bg-white/15 text-white{% else %}text-white/70 hover:bg-white/10 hover:text-white{% endif %}">
          M&amp;EL
          <svg class="h-3 w-3 text-white/40 transition-transform duration-150" :class="activeMenu === 'mel' && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
          </svg>
        </button>

        {# M&EL Panel — 7 SRS-aligned surfaces (Dashboard, Results frameworks, Indicators, Data validation, Tracking, Compliance & actions, Reports & Feedback) #}
        <div x-show="activeMenu === 'mel'" x-cloak
          x-transition:enter="transition ease-out duration-100"
          x-transition:enter-start="opacity-0 -translate-y-1"
          x-transition:enter-end="opacity-100 translate-y-0"
          x-transition:leave="transition ease-in duration-75"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
          class="absolute left-0 top-full z-50 mt-1.5 rounded-xl bg-white shadow-dropdown"
          style="border: 1px solid rgba(196,180,154,0.5); padding: 16px; width: 22rem; max-width: 92vw;">

          {# 4-item M&EL surfaces. No nested <a> chips — that's invalid HTML. Sub-surfaces live on each landing page as a section-tab strip. #}
          <div class="space-y-0.5">
          {% if nav_mel_officer %}

            {# ── 1. Dashboard — cross-module landing ── #}
            <a href="{% url 'mel_tracking:tracking_dashboard' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'mel_tracking' and url_name == 'tracking_dashboard' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'mel_tracking' and url_name == 'tracking_dashboard' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'mel_tracking' and url_name == 'tracking_dashboard' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 3v18h18M7 14l4-4 4 4 6-6"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'mel_tracking' and url_name == 'tracking_dashboard' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Dashboard</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Cross-module impact, RAG rollup &amp; alerts</p>
              </div>
            </a>

            {# ── 2. Results frameworks — M&E SRS results planning & hierarchy ── #}
            <a href="{% url 'mel_indicators:logframe_list' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'mel_indicators' and 'logframe' in url_name %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'mel_indicators' and 'logframe' in url_name %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'mel_indicators' and 'logframe' in url_name %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'mel_indicators' and 'logframe' in url_name %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Strategic Objectives</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Impact → Intermediate Outcome → University / Secretariat Outputs</p>
              </div>
            </a>

            {# ── 3. Indicators — disaggregated measurement framework ── #}
            <a href="{% url 'mel_indicators:indicator_list' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'mel_indicators' and 'logframe' not in url_name and url_name != 'validation_queue' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'mel_indicators' and 'logframe' not in url_name and url_name != 'validation_queue' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'mel_indicators' and 'logframe' not in url_name and url_name != 'validation_queue' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'mel_indicators' and 'logframe' not in url_name and url_name != 'validation_queue' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Indicators</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Disaggregated indicators · outcomes · impact · alerts</p>
              </div>
            </a>

            {# ── 4. Data validation — M&E SRS Table 65 pending-validation queue ── #}
            <a href="{% url 'mel_indicators:validation_queue' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Data validation</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Pending submissions, clarification loop &amp; verification</p>
              </div>
            </a>

            {# ── 5. Tracking — activities, outputs, SME-Hub portfolio ── #}
            <a href="{% url 'mel_tracking:activity_list' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'mel_tracking' and url_name != 'tracking_dashboard' and 'corrective' not in url_name %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'mel_tracking' and url_name != 'tracking_dashboard' and 'corrective' not in url_name %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'mel_tracking' and url_name != 'tracking_dashboard' and 'corrective' not in url_name %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'mel_tracking' and url_name != 'tracking_dashboard' and 'corrective' not in url_name %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Tracking</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Activities, outputs, upstream events &amp; SME-Hub portfolio</p>
              </div>
            </a>

            {# ── 6. Compliance & actions — issues register + corrective actions (M&E SRS Table 66) ── #}
            {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'mel_officer' or user.role == 'program_manager' or user.role == 'program_director' %}
            <a href="{% url 'mel_reports:compliance_alerts' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'mel_reports' and 'compliance' in url_name or ns == 'mel_tracking' and 'corrective' in url_name %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'mel_reports' and 'compliance' in url_name or ns == 'mel_tracking' and 'corrective' in url_name %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'mel_reports' and 'compliance' in url_name or ns == 'mel_tracking' and 'corrective' in url_name %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0 3h.008v.008H12v-.008zm9-2.709c0 5.592-3.824 10.29-9 11.623-5.176-1.332-9-6.03-9-11.622 0-1.31.21-2.571.598-3.751A11.959 11.959 0 0012 2.714c3.183 2.025 6.51 3.286 8.402 3.535.388 1.18.598 2.44.598 3.75z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'mel_reports' and 'compliance' in url_name or ns == 'mel_tracking' and 'corrective' in url_name %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Compliance &amp; actions</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Compliance issues register &amp; corrective-action tracking</p>
              </div>
            </a>
            {% endif %}

            {# ── 7. Reports & Feedback — outputs to stakeholders + feedback inbox ── #}
            <a href="{% url 'mel_reports:report_list' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'mel_feedback' or ns == 'mel_reports' and 'compliance' not in url_name %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'mel_feedback' or ns == 'mel_reports' and 'compliance' not in url_name %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'mel_feedback' or ns == 'mel_reports' and 'compliance' not in url_name %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'mel_feedback' or ns == 'mel_reports' and 'compliance' not in url_name %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Reports &amp; Feedback</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Versioned exports, surveys &amp; stakeholder inbox</p>
              </div>
            </a>

          {% else %}
            {# ── Program Coordinator / Implementer — scoped to what they can reach:
                 submit implementation data for their indicators, then track it. ── #}
            <a href="{% url 'mel_indicators:data_entry' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'mel_indicators' and url_name == 'data_entry' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'mel_indicators' and url_name == 'data_entry' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'mel_indicators' and url_name == 'data_entry' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'mel_indicators' and url_name == 'data_entry' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Submit implementation data</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Report progress for indicators assigned to you</p>
              </div>
            </a>

            <a href="{% url 'mel_indicators:validation_queue' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">My submissions</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Track validation status &amp; clarification requests</p>
              </div>
            </a>
          {% endif %}

          </div>{# /space-y-0.5 — 7-item M&EL list aligned to the M&E SRS submodules #}
        </div>{# /panel #}
      </div>{# /M&EL relative wrapper #}
      {% endif %}{# M&EL role gate #}

      {# Alumni dropdown #}
      {% if nav_show_alumni %}
      <div class="relative" @mouseenter="openMenu('alumni')" @mouseleave="closeMenu()">
        <button type="button" @click="toggleMenu('alumni')" :aria-expanded="activeMenu === 'alumni'"
          class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors
                 {% if ns == 'alumni_profiles' or ns == 'alumni_tracking' or ns == 'alumni_engagement' %}bg-white/15 text-white{% else %}text-white/70 hover:bg-white/10 hover:text-white{% endif %}">
          Alumni
          <svg class="h-3 w-3 text-white/40 transition-transform duration-150" :class="activeMenu === 'alumni' && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
          </svg>
        </button>

        {# Alumni Panel #}
        <div x-show="activeMenu === 'alumni'" x-cloak
          x-transition:enter="transition ease-out duration-100"
          x-transition:enter-start="opacity-0 -translate-y-1"
          x-transition:enter-end="opacity-100 translate-y-0"
          x-transition:leave="transition ease-in duration-75"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
          class="absolute left-0 top-full z-50 mt-1.5 rounded-xl bg-white shadow-dropdown"
          style="border: 1px solid rgba(196,180,154,0.5); padding: 20px; width: max-content; max-width: 92vw;">

          <div class="grid gap-x-6"
               style="grid-template-columns: {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'alumni_officer' or user.role == 'mel_officer' %}1fr 1fr{% else %}1fr{% endif %};">

            {# ── Column 1 — Connect ── #}
            <div>
              <p class="mb-3 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Connect</p>
              <div class="space-y-0.5">
                <a href="{% url 'alumni_profiles:directory' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_profiles' and url_name == 'directory' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_profiles' and url_name == 'directory' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_profiles' and url_name == 'directory' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_profiles' and url_name == 'directory' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Directory</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Browse the public alumni network</p>
                  </div>
                </a>

                {% if user.is_authenticated %}
                <a href="{% url 'alumni_profiles:profile_edit_self' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_profiles' and url_name == 'profile_edit_self' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_profiles' and url_name == 'profile_edit_self' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_profiles' and url_name == 'profile_edit_self' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_profiles' and url_name == 'profile_edit_self' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">My profile</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Edit degrees, employment &amp; visibility</p>
                  </div>
                </a>

                <a href="{% url 'alumni_engagement:mentorship_discover' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_engagement' and url_name == 'mentorship_discover' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_engagement' and url_name == 'mentorship_discover' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_engagement' and url_name == 'mentorship_discover' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_engagement' and url_name == 'mentorship_discover' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Find a mentor</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">AI-weighted expertise &amp; geography match</p>
                  </div>
                </a>

                <a href="{% url 'alumni_engagement:mentorship_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_engagement' and url_name == 'mentorship_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_engagement' and url_name == 'mentorship_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_engagement' and url_name == 'mentorship_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_engagement' and url_name == 'mentorship_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">My mentorships</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Active, pending &amp; completed pairings</p>
                  </div>
                </a>

                <a href="{% url 'alumni_engagement:event_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_engagement' and url_name == 'event_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_engagement' and url_name == 'event_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_engagement' and url_name == 'event_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_engagement' and url_name == 'event_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Events</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Webinars, forums, AGMs &amp; regional meetups</p>
                  </div>
                </a>

                <a href="{% url 'alumni_engagement:network_group_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_engagement' and url_name == 'network_group_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_engagement' and url_name == 'network_group_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_engagement' and url_name == 'network_group_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_engagement' and url_name == 'network_group_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Groups</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Country chapters, disciplines &amp; cohorts</p>
                  </div>
                </a>

                <a href="{% url 'alumni_jobs:board' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_jobs' and url_name == 'board' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_jobs' and url_name == 'board' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_jobs' and url_name == 'board' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.075a2.25 2.25 0 01-2.25 2.25h-12a2.25 2.25 0 01-2.25-2.25v-4.075m16.5 0V8.25a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 8.25v5.9m16.5 0a23.85 23.85 0 01-16.5 0M9 6V4.5A1.5 1.5 0 0110.5 3h3A1.5 1.5 0 0115 4.5V6"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_jobs' and url_name == 'board' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Jobs</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Match-aware listings for alumni</p>
                  </div>
                </a>

                <a href="{% url 'alumni_recognition:spotlight_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_recognition' and url_name == 'spotlight_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_recognition' and url_name == 'spotlight_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_recognition' and url_name == 'spotlight_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.562.562 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.562.562 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_recognition' and url_name == 'spotlight_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Recognition</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Spotlights, partner of the year &amp; mentor honours</p>
                  </div>
                </a>

                {% if user.role == 'partner' or user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'alumni_officer' %}
                <a href="{% url 'alumni_jobs:submit' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_jobs' and url_name == 'submit' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_jobs' and url_name == 'submit' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_jobs' and url_name == 'submit' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_jobs' and url_name == 'submit' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Submit a job</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Partner orgs post listings to the alumni board</p>
                  </div>
                </a>
                {% endif %}
                {% endif %}
              </div>
            </div>

            {# ── Column 2 — Track (staff) ── #}
            {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'alumni_officer' or user.role == 'mel_officer' %}
            <div>
              <p class="mb-3 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Track</p>
              <div class="space-y-0.5">
                <a href="{% url 'alumni_tracking:milestone_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_tracking' and url_name == 'milestone_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_tracking' and url_name == 'milestone_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_tracking' and url_name == 'milestone_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_tracking' and url_name == 'milestone_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Milestones</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Promotions, awards &amp; publications</p>
                  </div>
                </a>

                <a href="{% url 'alumni_tracking:impact_report' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_tracking' and url_name == 'impact_report' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_tracking' and url_name == 'impact_report' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_tracking' and url_name == 'impact_report' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.306a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_tracking' and url_name == 'impact_report' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Impact report</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Monthly donor-facing snapshots</p>
                  </div>
                </a>

                <a href="{% url 'alumni_profiles:admin_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_profiles' and url_name == 'admin_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_profiles' and url_name == 'admin_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_profiles' and url_name == 'admin_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a6.759 6.759 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.28z"/>
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_profiles' and url_name == 'admin_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Directory admin</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Curate &amp; moderate the alumni directory</p>
                  </div>
                </a>

                <a href="{% url 'alumni_tracking:kpi_dashboard' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_tracking' and url_name == 'kpi_dashboard' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_tracking' and url_name == 'kpi_dashboard' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_tracking' and url_name == 'kpi_dashboard' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_tracking' and url_name == 'kpi_dashboard' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">KPIs</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Engagement, mentorship &amp; group activity</p>
                  </div>
                </a>

                {% url 'alumni_profiles:insights' as insights_url %}
                <a href="{{ insights_url }}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_profiles' and url_name == 'insights' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_profiles' and url_name == 'insights' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_profiles' and url_name == 'insights' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_profiles' and url_name == 'insights' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Insights</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Demographics, map &amp; cohort trends</p>
                  </div>
                </a>

                <a href="{% url 'alumni_recognition:broadcast_list' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_recognition' and url_name == 'broadcast_list' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_recognition' and url_name == 'broadcast_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_recognition' and url_name == 'broadcast_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_recognition' and url_name == 'broadcast_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Broadcast</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Newsletters &amp; announcements to alumni</p>
                  </div>
                </a>

                <a href="{% url 'alumni_recognition:cockpit' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_recognition' and url_name == 'cockpit' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_recognition' and url_name == 'cockpit' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_recognition' and url_name == 'cockpit' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 013 3h-15a3 3 0 013-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 01-.982-3.172M9.497 14.25a7.454 7.454 0 00.981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 007.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 002.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 012.916.52 6.003 6.003 0 01-5.395 4.972m0 0a6.726 6.726 0 01-2.749 1.35m0 0a6.772 6.772 0 01-3.044 0"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_recognition' and url_name == 'cockpit' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Recognition cockpit</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Pick winners &amp; publish spotlights</p>
                  </div>
                </a>

                <a href="{% url 'alumni_jobs:pending' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_jobs' and url_name == 'pending' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_jobs' and url_name == 'pending' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_jobs' and url_name == 'pending' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21.75a3.745 3.745 0 01-3.068-1.593 3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 2.25c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_jobs' and url_name == 'pending' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Job approvals</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Review partner-submitted listings</p>
                  </div>
                </a>

                <a href="{% url 'alumni_profiles:employer_feedback_report' %}"
                   class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                          {% if ns == 'alumni_profiles' and url_name == 'employer_feedback_report' %}bg-ruforum-warm-hover{% endif %}">
                  <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                              {% if ns == 'alumni_profiles' and url_name == 'employer_feedback_report' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                    <svg class="h-4 w-4 {% if ns == 'alumni_profiles' and url_name == 'employer_feedback_report' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/>
                    </svg>
                  </div>
                  <div class="min-w-0">
                    <p class="text-sm font-medium {% if ns == 'alumni_profiles' and url_name == 'employer_feedback_report' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Employer feedback</p>
                    <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Industry input on programme curricula</p>
                  </div>
                </a>
              </div>
            </div>
            {% endif %}

          </div>
        </div>
      </div>
      {% endif %}{# nav_show_alumni #}

      {# SME-Hub dropdown — Slice B.1: 7 user items + 3 admin hubs (re-homed mega-menu). #}
      {% if nav_show_smehub %}
      <div class="relative"
        x-data="{
          reposition() {
            this.$nextTick(() => {
              const panel = this.$refs.smehubPanel;
              if (!panel) return;
              panel.style.left = '0px';
              const gutter = 8;
              const vw = document.documentElement.clientWidth;
              const r = panel.getBoundingClientRect();
              let delta = 0;
              if (r.right > vw - gutter) delta = (vw - gutter) - r.right;
              if (r.left + delta < gutter) delta = gutter - r.left;
              panel.style.left = delta + 'px';
            });
          }
        }"
        x-effect="if (activeMenu === 'smehub') reposition()"
        @mouseenter="openMenu('smehub')" @mouseleave="closeMenu()">
        <button type="button" @click="toggleMenu('smehub')" :aria-expanded="activeMenu === 'smehub'"
          class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors
                 {% if ns == 'smehub_onboarding' or ns == 'smehub_incubation' or ns == 'smehub_linkage' or ns == 'smehub_marketplace' or ns == 'smehub_showcasing' or ns == 'smehub_investment' or url_name == 'smehub_admin_verification' or url_name == 'smehub_admin_pipeline' or url_name == 'smehub_admin_operations' %}bg-white/15 text-white{% else %}text-white/70 hover:bg-white/10 hover:text-white{% endif %}">
          SME-Hub
          <svg class="h-3 w-3 text-white/40 transition-transform duration-150" :class="activeMenu === 'smehub' && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
          </svg>
        </button>

        <div x-show="activeMenu === 'smehub'" x-cloak
          x-ref="smehubPanel"
          @resize.window="if (activeMenu === 'smehub') reposition()"
          x-transition:enter="transition ease-out duration-100"
          x-transition:enter-start="opacity-0 -translate-y-1"
          x-transition:enter-end="opacity-100 translate-y-0"
          x-transition:leave="transition ease-in duration-75"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
          class="absolute left-0 top-full mt-2 z-50 rounded-xl bg-white shadow-dropdown"
          style="border: 1px solid rgba(196,180,154,0.5); padding: 14px; width: 560px; max-width: calc(100vw - 24px);">

          {# ── Everyday surfaces — visible to every authenticated user ── #}
          <p class="mb-2 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Workspace</p>
          <div class="grid grid-cols-2 gap-1 mb-3">
            <a href="{% url 'smehub_onboarding:my_dashboard' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'smehub_onboarding' and url_name == 'my_dashboard' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'smehub_onboarding' and url_name == 'my_dashboard' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'smehub_onboarding' and url_name == 'my_dashboard' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3v-6h6v6h3a1 1 0 001-1V10"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'smehub_onboarding' and url_name == 'my_dashboard' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">My SME-Hub</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Profile, businesses, role workspaces</p>
              </div>
            </a>

            <a href="{% url 'smehub_incubation:hub' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'smehub_incubation' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'smehub_incubation' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'smehub_incubation' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h7"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'smehub_incubation' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Incubation</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Programmes, cohorts, mentor & judge surfaces</p>
              </div>
            </a>

            <a href="{% url 'smehub_marketplace:hub' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'smehub_marketplace' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'smehub_marketplace' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'smehub_marketplace' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293A1 1 0 005.414 17H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'smehub_marketplace' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Marketplace</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Products, demand, sales, buyers</p>
              </div>
            </a>

            <a href="{% url 'smehub_showcasing:hub' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'smehub_showcasing' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'smehub_showcasing' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'smehub_showcasing' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'smehub_showcasing' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Showcasing</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Events, challenges, innovation catalogue</p>
              </div>
            </a>

            <a href="{% url 'smehub_investment:hub' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'smehub_investment' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'smehub_investment' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'smehub_investment' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'smehub_investment' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Investment</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Funding calls, investors, pitches, matches</p>
              </div>
            </a>

            <a href="{% url 'smehub_linkage:hub' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'smehub_linkage' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'smehub_linkage' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'smehub_linkage' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'smehub_linkage' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Linkage & Network</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Partners, providers, MoUs, regulatory guides</p>
              </div>
            </a>
            <a href="{% url 'smehub_showcasing:my_deal_rooms' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'smehub_showcasing' and url_name == 'my_deal_rooms' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'smehub_showcasing' and url_name == 'my_deal_rooms' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'smehub_showcasing' and url_name == 'my_deal_rooms' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'smehub_showcasing' and url_name == 'my_deal_rooms' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Deal rooms</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Secure messaging with counterparties</p>
              </div>
            </a>

            <a href="{% url 'smehub_onboarding:mentor_directory' %}"
               class="group flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors
                      {% if ns == 'smehub_onboarding' and url_name == 'mentor_directory' or ns == 'smehub_onboarding' and url_name == 'mentor_detail' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if ns == 'smehub_onboarding' and url_name == 'mentor_directory' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if ns == 'smehub_onboarding' and url_name == 'mentor_directory' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if ns == 'smehub_onboarding' and url_name == 'mentor_directory' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Mentor directory</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Browse verified mentors by expertise</p>
              </div>
            </a>
          </div>

          {# Slim help link — sits at the foot of the Workspace group #}
          <a href="{% url 'smehub_onboarding:faq' %}"
             class="group mb-1 flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm transition-colors
                    {% if ns == 'smehub_onboarding' and url_name == 'faq' %}bg-ruforum-warm-hover text-ruforum-primary{% else %}text-ruforum-text-muted hover:bg-ruforum-warm-hover hover:text-ruforum-text{% endif %}">
            <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span class="font-medium text-ruforum-text">Help &amp; FAQ</span>
            <span class="text-xs text-ruforum-text-muted">· Frequently asked questions</span>
          </a>
          <a href="{% url 'smehub_onboarding:community_archive' %}"
             class="group mb-1 flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm transition-colors
                    {% if ns == 'smehub_onboarding' and url_name == 'community_archive' %}bg-ruforum-warm-hover text-ruforum-primary{% else %}text-ruforum-text-muted hover:bg-ruforum-warm-hover hover:text-ruforum-text{% endif %}">
            <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
            </svg>
            <span class="font-medium text-ruforum-text">Community archive</span>
            <span class="text-xs text-ruforum-text-muted">· Peer discussions from the original SME-Hub</span>
          </a>

          {# ── Admin row — visible to elevated roles only ── #}
          {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'sme_admin' or user.role == 'mel_officer' or user.role == 'programme_officer' %}
          <div class="mt-3 pt-3 border-t border-ruforum-border/60">
            <p class="mb-2 font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">Admin</p>
            <div class="grid grid-cols-3 gap-1">
              <a href="{% url 'smehub_admin_verification' %}"
                 class="group flex flex-col gap-0.5 rounded-lg px-2 py-2 transition-colors
                        {% if url_name == 'smehub_admin_verification' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
                <p class="text-sm font-medium {% if url_name == 'smehub_admin_verification' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Verification</p>
                <p class="text-xs leading-snug text-ruforum-text-muted">Queues for every party</p>
              </a>
              <a href="{% url 'smehub_admin_pipeline' %}"
                 class="group flex flex-col gap-0.5 rounded-lg px-2 py-2 transition-colors
                        {% if url_name == 'smehub_admin_pipeline' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
                <p class="text-sm font-medium {% if url_name == 'smehub_admin_pipeline' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Pipeline</p>
                <p class="text-xs leading-snug text-ruforum-text-muted">Showcasing & investment ops</p>
              </a>
              <a href="{% url 'smehub_admin_operations' %}"
                 class="group flex flex-col gap-0.5 rounded-lg px-2 py-2 transition-colors
                        {% if url_name == 'smehub_admin_operations' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
                <p class="text-sm font-medium {% if url_name == 'smehub_admin_operations' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Operations</p>
                <p class="text-xs leading-snug text-ruforum-text-muted">Programmes, cohorts, linkage</p>
              </a>

              {# Competitions — programme staff (matches ProgrammeStaffRequired) #}
              {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'sme_admin' or user.role == 'programme_officer' %}
              <a href="{% url 'smehub_incubation:competition_list' %}"
                 class="group flex flex-col gap-0.5 rounded-lg px-2 py-2 transition-colors
                        {% if ns == 'smehub_incubation' and url_name == 'competition_list' or ns == 'smehub_incubation' and url_name == 'competition_detail' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
                <p class="text-sm font-medium {% if ns == 'smehub_incubation' and url_name == 'competition_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Competitions</p>
                <p class="text-xs leading-snug text-ruforum-text-muted">Calls, applications, answers & scores</p>
              </a>
              {% endif %}

              {# Newsletter + Analytics — SME admins only (matches SMEAdminRequired) #}
              {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'sme_admin' %}
              <a href="{% url 'smehub_onboarding:sme_analytics' %}"
                 class="group flex flex-col gap-0.5 rounded-lg px-2 py-2 transition-colors
                        {% if url_name == 'sme_analytics' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
                <p class="text-sm font-medium {% if url_name == 'sme_analytics' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Analytics</p>
                <p class="text-xs leading-snug text-ruforum-text-muted">Youth, gender, sector & geography</p>
              </a>
              <a href="{% url 'smehub_onboarding:newsletter_subscribers' %}"
                 class="group flex flex-col gap-0.5 rounded-lg px-2 py-2 transition-colors
                        {% if url_name == 'newsletter_subscribers' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
                <p class="text-sm font-medium {% if url_name == 'newsletter_subscribers' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Newsletter</p>
                <p class="text-xs leading-snug text-ruforum-text-muted">Subscribers & CSV export</p>
              </a>
              <a href="{% url 'smehub_onboarding:meeting_requests' %}"
                 class="group flex flex-col gap-0.5 rounded-lg px-2 py-2 transition-colors
                        {% if url_name == 'meeting_requests' %}bg-ruforum-warm-hover{% else %}hover:bg-ruforum-warm-hover{% endif %}">
                <p class="text-sm font-medium {% if url_name == 'meeting_requests' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Meeting requests</p>
                <p class="text-xs leading-snug text-ruforum-text-muted">Mentor & business meeting asks</p>
              </a>
              {% endif %}
            </div>
          </div>
          {% endif %}

        </div>
      </div>
      {% endif %}


      {# Users dropdown — admins / elevated roles only #}
      {% if user.is_superuser or user.role == 'admin' or perms.core.manage_users or perms.core.manage_role_permissions or user.is_staff %}
      <div class="relative" @mouseenter="openMenu('users')" @mouseleave="closeMenu()">
        <button type="button" @click="toggleMenu('users')" :aria-expanded="activeMenu === 'users'"
          class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors text-white/70 hover:bg-white/10 hover:text-white">
          Users
          <svg class="h-3 w-3 text-white/40 transition-transform duration-150" :class="activeMenu === 'users' && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
          </svg>
        </button>

        {# Users Panel #}
        <div x-show="activeMenu === 'users'" x-cloak
          x-transition:enter="transition ease-out duration-100"
          x-transition:enter-start="opacity-0 -translate-y-1"
          x-transition:enter-end="opacity-100 translate-y-0"
          x-transition:leave="transition ease-in duration-75"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
          class="absolute left-0 top-full z-50 mt-1.5 rounded-xl bg-white shadow-dropdown"
          style="border: 1px solid rgba(196,180,154,0.5); padding: 20px; width: max-content; max-width: 92vw;">

          <div class="space-y-0.5">

            {% if user.is_superuser or user.role == 'admin' or perms.core.manage_users %}
            <a href="{% url 'core:user_manage_list' %}"
               class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                      {% if url_name == 'user_manage_list' or url_name == 'user_manage_detail' %}bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if url_name == 'user_manage_list' or url_name == 'user_manage_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if url_name == 'user_manage_list' or url_name == 'user_manage_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if url_name == 'user_manage_list' or url_name == 'user_manage_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Users</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Manage platform accounts</p>
              </div>
            </a>
            {% endif %}

            {% if user.is_superuser or user.role == 'admin' or perms.core.manage_role_permissions %}
            <a href="{% url 'core:role_permissions_list' %}"
               class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                      {% if url_name == 'role_permissions_list' or url_name == 'role_permissions_detail' %}bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if url_name == 'role_permissions_list' or url_name == 'role_permissions_detail' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if url_name == 'role_permissions_list' or url_name == 'role_permissions_detail' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if url_name == 'role_permissions_list' or url_name == 'role_permissions_detail' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Roles & permissions</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Configure role access controls</p>
              </div>
            </a>
            {% endif %}

            {% if user.is_superuser or user.role == 'admin' or user.is_staff %}
            <a href="{% url 'core:audit_log_list' %}"
               class="group flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-ruforum-warm-hover
                      {% if url_name == 'audit_log_list' %}bg-ruforum-warm-hover{% endif %}">
              <div class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg
                          {% if url_name == 'audit_log_list' %}bg-ruforum-primary{% else %}bg-ruforum-surface group-hover:bg-ruforum-border{% endif %}">
                <svg class="h-4 w-4 {% if url_name == 'audit_log_list' %}text-white{% else %}text-ruforum-text-muted{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z"/>
                </svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-medium {% if url_name == 'audit_log_list' %}text-ruforum-primary{% else %}text-ruforum-text{% endif %}">Logs</p>
                <p class="mt-0.5 text-xs leading-snug text-ruforum-text-muted">Audit trail and activity logs</p>
              </div>
            </a>
            {% endif %}

          </div>
        </div>
      </div>
      {% endif %}

      {% endif %}{# end is_authenticated #}

    </nav>

    {# ── Utilities (right side) ──────────────────── #}
    <div class="ml-auto flex shrink-0 items-center gap-1">

      {% if user.is_authenticated %}
      <a href="{% url 'core:global_search' %}"
         class="rounded-lg p-2 text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/40"
         aria-label="Search">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
        </svg>
      </a>
      <a href="{% url 'core:notification_inbox' %}"
         class="relative rounded-lg p-2 text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/40"
         aria-label="Notifications">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
        </svg>
        {% include "notifications/partials/badge.html" with unread_count=nav_unread_notifications|default:0 %}
      </a>

      {# User menu #}
      <div class="relative" x-data="{ open: false }">

        {# Trigger #}
        <button type="button"
          class="ml-1 flex items-center gap-2 rounded-lg py-1.5 pl-2 pr-2.5 transition-colors hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/40"
          @click="open = !open" :aria-expanded="open">
          {% include "components/user_avatar.html" with user=request.user size="sm" variant="on_dark" only %}
          <span class="hidden max-w-[8rem] truncate text-[13px] font-medium text-white/80 sm:block">
            {{ request.user.get_full_name|default:request.user.email }}
          </span>
          <svg class="h-3 w-3 shrink-0 text-white/40 transition-transform duration-150" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
          </svg>
        </button>

        {# Panel #}
        <div x-show="open" @click.outside="open = false" x-cloak
          x-transition:enter="transition ease-out duration-150"
          x-transition:enter-start="opacity-0 scale-95 -translate-y-1"
          x-transition:enter-end="opacity-100 scale-100 translate-y-0"
          x-transition:leave="transition ease-in duration-100"
          x-transition:leave-start="opacity-100"
          x-transition:leave-end="opacity-0"
          class="absolute right-0 top-full z-50 mt-2 w-72 origin-top-right overflow-hidden rounded-xl bg-white shadow-dropdown"
          style="border: 1px solid rgba(196,180,154,0.5);">

          {# Identity card header — warm cream tint #}
          <div class="bg-ruforum-surface px-4 py-3.5" style="border-bottom: 1px solid rgba(196,180,154,0.35);">
            <div class="flex items-center gap-3">
              {% include "components/user_avatar.html" with user=request.user size="lg" variant="on_dark" only %}
              <div class="min-w-0 flex-1">
                <p class="truncate text-[13px] font-semibold leading-snug text-ruforum-text">
                  {{ request.user.get_full_name|default:request.user.email }}
                </p>
                <div class="mt-1.5">
                  <span class="inline-flex items-center rounded px-1.5 py-0.5 font-meta text-[9px] uppercase tracking-[0.1em] text-ruforum-primary" style="background: rgba(107,83,23,0.1);">
                    {% if request.user.is_superuser %}Superuser
                    {% elif request.user.role %}{{ request.user.get_role_display }}
                    {% elif request.user.is_staff %}Staff
                    {% else %}Member{% endif %}
                  </span>
                </div>
              </div>
            </div>
          </div>

          {# Account #}
          <div class="py-1.5">
            <a href="{% url 'accounts:profile' %}"
               class="group flex items-center gap-2.5 px-3.5 py-1.5 text-[13px] text-ruforum-text transition-colors hover:bg-ruforum-warm-hover">
              <svg class="h-3.5 w-3.5 shrink-0 text-ruforum-text-muted transition-colors group-hover:text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
              </svg>
              {% translate "Profile" %}
            </a>
            <a href="{% url 'accounts:mfa_manage' %}"
               class="group flex items-center gap-2.5 px-3.5 py-1.5 text-[13px] text-ruforum-text transition-colors hover:bg-ruforum-warm-hover">
              <svg class="h-3.5 w-3.5 shrink-0 text-ruforum-text-muted transition-colors group-hover:text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
              </svg>
              {% translate "Security" %}
            </a>
          </div>

          {% comment %}
            WS5.12 — Language switcher, disabled for now (English is the default;
            re-enable once FR/AR/PT translations are ready). POSTs to Django's
            set_language so the choice persists in the user's session.
          {% endcomment %}
          {% comment %}
          {% get_current_language as CURRENT_LANG %}
          <div class="mx-3 h-px bg-ruforum-border"></div>
          <div class="py-1.5">
            <p class="px-3.5 pt-1 pb-1.5 font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">
              {% translate "Language" %}
            </p>
            {% for lang_code, lang_name in LANGUAGES %}
            <form action="{% url 'set_language' %}" method="post" class="m-0">
              {% csrf_token %}
              <input type="hidden" name="next" value="{{ request.get_full_path }}">
              <input type="hidden" name="language" value="{{ lang_code }}">
              <button type="submit"
                      class="group flex w-full items-center gap-2.5 px-3.5 py-1.5 text-left text-[13px] transition-colors hover:bg-ruforum-warm-hover
                             {% if lang_code == CURRENT_LANG %}font-semibold text-ruforum-primary{% else %}text-ruforum-text{% endif %}"
                      {% if lang_code == CURRENT_LANG %}aria-current="true"{% endif %}>
                {% if lang_code == CURRENT_LANG %}
                <svg class="h-3.5 w-3.5 shrink-0 text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
                </svg>
                {% else %}
                <span class="h-3.5 w-3.5 shrink-0" aria-hidden="true"></span>
                {% endif %}
                {{ lang_name }}
                <span class="ml-auto font-meta text-[10px] uppercase tracking-[0.10em] text-ruforum-text-muted">{{ lang_code }}</span>
              </button>
            </form>
            {% endfor %}
          </div>
          {% endcomment %}

          {# Admin panel — staff only #}
          {% if user.is_staff or perms.core.manage_users %}
          <div class="mx-3 h-px bg-ruforum-border"></div>
          <div class="py-1.5">
            {% if user.is_staff or perms.core.manage_users %}
            {# WS5.3 — staff user management. Gated on manage_users perm. #}
            {% pending_user_review_count as PENDING_USERS %}
            <a href="{% url 'accounts:manage_users' %}"
               class="group flex items-center gap-2.5 px-3.5 py-1.5 text-[13px] text-ruforum-text transition-colors hover:bg-ruforum-warm-hover">
              <svg class="h-3.5 w-3.5 shrink-0 text-ruforum-text-muted transition-colors group-hover:text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
              </svg>
              <span class="flex-1">{% translate "Manage users" %}</span>
              {% if PENDING_USERS %}
              <span class="ml-auto inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-amber-100 px-1.5 py-0.5 font-meta text-[10px] font-semibold tabular-nums text-amber-700"
                    title="{% blocktranslate count counter=PENDING_USERS %}{{ counter }} registration awaiting review{% plural %}{{ counter }} registrations awaiting review{% endblocktranslate %}">
                {{ PENDING_USERS }}
              </span>
              {% endif %}
            </a>
            {% endif %}
            {% if user.is_staff %}

            <a href="{% url 'core:notification_template_list' %}"
               class="group flex items-center gap-2.5 px-3.5 py-1.5 text-[13px] text-ruforum-text transition-colors hover:bg-ruforum-warm-hover">
              <svg class="h-3.5 w-3.5 shrink-0 text-ruforum-text-muted transition-colors group-hover:text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"/>
              </svg>
              {% translate "Notification templates" %}
            </a>
            <a href="{% url 'admin:index' %}"
               class="group flex items-center gap-2.5 px-3.5 py-1.5 text-[13px] text-ruforum-text transition-colors hover:bg-ruforum-warm-hover">
              <svg class="h-3.5 w-3.5 shrink-0 text-ruforum-text-muted transition-colors group-hover:text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/>
              </svg>
              {% translate "Django admin" %}
            </a>
            {% endif %}
          </div>
          {% endif %}

          {# Sign out #}
          <div class="mx-3 h-px bg-ruforum-border"></div>
          <div class="py-1.5">
            <a href="{% url 'accounts:logout' %}"
               class="group flex items-center gap-2.5 px-3.5 py-1.5 text-[13px] font-medium text-red-600 transition-colors hover:bg-red-50">
              <svg class="h-3.5 w-3.5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"/>
              </svg>
              {% translate "Sign out" %}
            </a>
          </div>

        </div>
      </div>

      {% else %}
      <a href="{% url 'accounts:login' %}?next={{ request.path }}"
         class="ml-1 rounded-lg bg-ruforum-primary px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-ruforum-primary-hover focus:outline-none focus:ring-2 focus:ring-white/40">
        Sign in
      </a>
      {% endif %}

      {# Mobile hamburger — authenticated only #}
      {% if user.is_authenticated %}
      <button type="button"
        class="ml-1 rounded-lg p-1.5 text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/40 md:hidden"
        @click="mobileOpen = !mobileOpen" :aria-expanded="mobileOpen" aria-label="Toggle navigation">
        <svg x-show="!mobileOpen" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
        <svg x-show="mobileOpen" x-cloak class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
      {% endif %}

    </div>
  </div>

  {# ── Mobile Menu Panel ───────────────────────────────────── #}
  <div x-show="mobileOpen" x-cloak
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 -translate-y-2"
    x-transition:enter-end="opacity-100 translate-y-0"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="absolute inset-x-0 top-full z-50 bg-ruforum-topbar md:hidden"
    style="border-top: 1px solid rgba(255,255,255,0.1); max-height: calc(100dvh - 56px); overflow-y: auto;">
    <nav class="space-y-0.5 px-4 py-3" aria-label="Mobile navigation">
      <a href="{% url 'core:dashboard' %}" @click="mobileOpen = false"
         class="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium transition-colors
                {% if url_name == 'dashboard' %}bg-white/15 text-white{% else %}text-white/75 hover:bg-white/10 hover:text-white{% endif %}">Dashboard</a>
      <a href="{% url 'core:notification_inbox' %}" @click="mobileOpen = false"
         class="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-white/75 transition-colors hover:bg-white/10 hover:text-white">Notifications</a>
      <a href="{% url 'core:global_search' %}" @click="mobileOpen = false"
         class="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-white/75 transition-colors hover:bg-white/10 hover:text-white">Search</a>

      {% if nav_show_rims %}
      <div x-data="{ open: {% if ns == 'rims_grants' or ns == 'rims_operations' or ns == 'rims_finance' or ns == 'rims_projects' or ns == 'rims_scholarships' %}true{% else %}false{% endif %} }">
        <button type="button" @click="open = !open"
          class="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-white/75 transition-colors hover:bg-white/10 hover:text-white">
          RIMS
          <svg class="ml-auto h-3.5 w-3.5 text-white/40 transition-transform duration-150" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div x-show="open" x-cloak class="ml-3 mt-0.5 space-y-0.5 border-l border-white/15 pl-3">
          {# Program Coordinator's RIMS remit is Finance/budgets only — hide grants/funding/operations. #}
          {% if not nav_rims_finance_only %}
          <p class="px-2 pt-1 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Grants</p>
          {% if not perms.rims_grants.manage_calls and user.role != 'admin' and user.role != 'grants_manager' %}
          <a href="{% url 'rims_grants:call_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if url_name == 'call_list' %}bg-white/10 text-white{% endif %}">Open calls</a>
          <a href="{% url 'rims_grants:application_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if url_name == 'application_list' %}bg-white/10 text-white{% endif %}">My applications</a>
          {% endif %}
          {% if perms.rims_grants.review_applications or perms.rims_grants.manage_calls or user.role == 'reviewer' or user.role == 'admin' or user.role == 'grants_manager' %}
          <a href="{% url 'rims_grants:review_queue' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Review queue</a>
          {% endif %}
          {% if perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'programme_officer' %}
          <a href="{% url 'rims_grants:manager_call_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Calls</a>
          <a href="{% url 'rims_grants:manager_all_applications' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Applications</a>
          <a href="{% url 'rims_grants:application_archive_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Application archive</a>
          <a href="{% url 'rims_grants:award_dashboard' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Awards</a>
          {% endif %}
          {% if perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'program_director' or user.role == 'finance_director' or user.role == 'system_admin' or user.role == 'finance_manager' or user.role == 'program_coordinator' %}
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Funding</p>
          {% if perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'program_director' or user.role == 'finance_director' or user.role == 'finance_manager' or user.role == 'program_coordinator' %}
          <a href="{% url 'rims_grants:funding_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Funding records</a>
          {% endif %}
          {% if user.role == 'admin' or user.role == 'system_admin' or user.role == 'program_director' or user.role == 'finance_director' %}
          <a href="{% url 'rims_grants:funding_approval_queue' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Approval queue</a>
          {% endif %}
          {% if perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' %}
          <a href="{% url 'rims_operations:donor_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Donors</a>
          <a href="{% url 'rims_operations:strategic_objective_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Strategic objectives</a>
          {% endif %}
          {% endif %}
          {% if perms.rims_grants.manage_operations or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' %}
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Operations</p>
          <a href="{% url 'rims_operations:partner_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Partners</a>
          <a href="{% url 'rims_operations:institution_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Institutions</a>
          <a href="{% url 'rims_operations:mou_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">MOUs</a>
          {% endif %}
          {% endif %}{# /non-finance sections hidden when nav_rims_finance_only #}
          {% if perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'finance_officer' or user.role == 'grants_manager' or user.role == 'auditor' or user.role == 'system_admin' or user.role == 'finance_manager' or user.role == 'program_coordinator' or user.role == 'project_manager' %}
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Finance</p>
          {% if perms.rims_grants.manage_finance or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'finance_officer' or user.role == 'grants_manager' or user.role == 'finance_manager' or user.role == 'program_coordinator' or user.role == 'project_manager' %}
          <a href="{% url 'rims_finance:budget_overview' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Budgets</a>
          <a href="{% url 'rims_finance:disbursement_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Disbursements</a>
          <a href="{% url 'rims_finance:payment_batch_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Payment batches</a>
          <a href="{% url 'rims_finance:analytics_dashboard' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Variance analytics</a>
          <a href="{% url 'rims_finance:donor_report_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Donor reports</a>
          <a href="{% url 'rims_finance:expenditure_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Expenditures</a>
          <a href="{% url 'rims_finance:gl_register' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">GL register</a>
          <a href="{% url 'rims_finance:bank_statement_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Bank statements</a>
          <a href="{% url 'rims_finance:payment_retry_queue' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Payment retries</a>
          <a href="{% url 'rims_finance:exchange_rate_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Exchange rates</a>
          {% if user.role == 'admin' or user.role == 'finance_manager' or user.role == 'finance_director' or user.role == 'system_admin' %}
          <a href="{% url 'rims_finance:approval_workflow_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Approval workflows</a>
          {% endif %}
          {% endif %}
          {% if user.role == 'auditor' or user.role == 'admin' or user.role == 'system_admin' %}
          <a href="{% url 'rims_finance:approval_telemetry' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Approval telemetry</a>
          <a href="{% url 'rims_operations:audit_log' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Audit log</a>
          {% endif %}
          {% endif %}
          {% if perms.rims_grants.manage_projects or perms.rims_grants.manage_calls or perms.rims_grants.manage_finance or user.role == 'admin' or user.role == 'finance_officer' or user.role == 'grants_manager' or user.role == 'project_manager' %}
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Projects</p>
          <a href="{% url 'rims_projects:project_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">All projects</a>
          <a href="{% url 'rims_projects:milestone_compliance' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Milestone compliance</a>
          {% endif %}
          {% if perms.rims_grants.manage_scholarships or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'finance_officer' or user.role == 'scholar' %}
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Scholarships</p>
          {% if perms.rims_grants.manage_scholarships or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' %}
          <a href="{% url 'rims_scholarships:officer_dashboard' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Officer dashboard</a>
          <a href="{% url 'rims_scholarships:scholarship_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Programmes</a>
          <a href="{% url 'rims_scholarships:scholar_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Scholars</a>
          {% endif %}
          {% if perms.rims_grants.manage_scholarships or perms.rims_grants.manage_calls or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'finance_officer' %}
          <a href="{% url 'rims_scholarships:stipend_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Stipends</a>
          {% endif %}
          {% if user.role == 'scholar' %}
          <a href="{% url 'rims_scholarships:my_scholarships' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">My scholarships</a>
          {% endif %}
        </div>
      </div>
      {% endif %}{# nav_show_rims (mobile) #}

      {# Learning is in Moodle now; the career/job-board links stay (app label rep_career). #}
      {% if nav_show_rep %}
      <div x-data="{ open: {% if ns == 'rep_career' %}true{% else %}false{% endif %} }">
        <button type="button" @click="open = !open"
          class="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-white/75 transition-colors hover:bg-white/10 hover:text-white">
          Learning &amp; Careers
          <svg class="ml-auto h-3.5 w-3.5 text-white/40 transition-transform duration-150" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div x-show="open" x-cloak class="ml-3 mt-0.5 space-y-0.5 border-l border-white/15 pl-3">
          <p class="px-2 pt-1 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Learning</p>
          <a href="{{ moodle_learning_url|default:moodle_url }}" target="_blank" rel="noopener" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Open Moodle</a>
          {% if user.is_authenticated %}
          <p class="px-2 pt-3 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Career</p>
          <a href="{% url 'rep_career:job_board' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Job board</a>
          <a href="{% url 'rep_career:my_applications' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">My applications</a>
          <a href="{% url 'rep_career:cv_builder' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">CV builder</a>
          <a href="{% url 'rep_career:resource_library' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Resource library</a>
          {% endif %}
          {% if perms.rep_career.post_job_listing or user.role == 'admin' or user.role == 'grants_manager' or user.role == 'rep_learning_admin' %}
          <p class="px-2 pt-3 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Manage</p>
          <a href="{% url 'rep_career:job_create' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Post a job</a>
          <a href="{% url 'rep_career:listing_reviews' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white">Review listings</a>
          {% endif %}
        </div>
      </div>
      {% endif %}{# nav_show_rep (mobile) #}

      {% if nav_show_mel %}
      <div x-data="{ open: {% if ns == 'mel_indicators' or ns == 'mel_tracking' or ns == 'mel_reports' or ns == 'mel_feedback' %}true{% else %}false{% endif %} }">
        <button type="button" @click="open = !open"
          class="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-white/75 transition-colors hover:bg-white/10 hover:text-white">
          M&amp;EL
          <svg class="ml-auto h-3.5 w-3.5 text-white/40 transition-transform duration-150" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div x-show="open" x-cloak class="ml-3 mt-0.5 space-y-0.5 border-l border-white/15 pl-3">
          {% if nav_mel_officer %}
          {# Mirrors the desktop 7-surface panel (M&E SRS submodules). #}
          <a href="{% url 'mel_tracking:tracking_dashboard' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_tracking' and url_name == 'tracking_dashboard' %}bg-white/10 text-white{% endif %}">Dashboard</a>
          <a href="{% url 'mel_indicators:logframe_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_indicators' and url_name == 'logframe_list' %}bg-white/10 text-white{% endif %}">Strategic Objectives</a>
          <a href="{% url 'mel_indicators:indicator_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_indicators' and url_name == 'indicator_list' %}bg-white/10 text-white{% endif %}">Indicators</a>
          <a href="{% url 'mel_indicators:validation_queue' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}bg-white/10 text-white{% endif %}">Data validation</a>
          <a href="{% url 'mel_tracking:activity_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_tracking' and url_name|slice:':8' == 'activity' %}bg-white/10 text-white{% endif %}">Tracking</a>
          {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'mel_officer' or user.role == 'program_manager' or user.role == 'program_director' %}
          <a href="{% url 'mel_reports:compliance_alerts' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_reports' and 'compliance' in url_name or ns == 'mel_tracking' and 'corrective' in url_name %}bg-white/10 text-white{% endif %}">Compliance &amp; actions</a>
          {% endif %}
          <a href="{% url 'mel_reports:report_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_feedback' or ns == 'mel_reports' and 'compliance' not in url_name %}bg-white/10 text-white{% endif %}">Reports &amp; Feedback</a>
          {% if user.role == 'mel_officer' or user.is_superuser or user.role == 'admin' or user.role == 'system_admin' %}
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Operate</p>
          <a href="{% url 'mel_indicators:data_entry' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_indicators' and url_name == 'data_entry' %}bg-white/10 text-white{% endif %}">Record data point</a>
          <a href="{% url 'mel_indicators:indicator_create' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_indicators' and url_name == 'indicator_create' %}bg-white/10 text-white{% endif %}">New indicator</a>
          <a href="{% url 'mel_tracking:event_log' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_tracking' and url_name == 'event_log' %}bg-white/10 text-white{% endif %}">Upstream events</a>
          <a href="{% url 'mel_tracking:indicator_reference' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_tracking' and url_name == 'indicator_reference' %}bg-white/10 text-white{% endif %}">Indicator reference</a>
          {% endif %}
          {% else %}
          {# Program Coordinator / Implementer — scoped submit-and-track menu. #}
          <a href="{% url 'mel_indicators:data_entry' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_indicators' and url_name == 'data_entry' %}bg-white/10 text-white{% endif %}">Submit implementation data</a>
          <a href="{% url 'mel_indicators:validation_queue' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'mel_indicators' and url_name == 'validation_queue' %}bg-white/10 text-white{% endif %}">My submissions</a>
          {% endif %}
        </div>
      </div>
      {% endif %}

      {% if user.is_superuser or user.role == 'admin' or perms.core.manage_users or perms.core.manage_role_permissions or user.is_staff %}
      <div x-data="{ open: false }">
        <button type="button" @click="open = !open"
          class="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-white/75 transition-colors hover:bg-white/10 hover:text-white">
          Users
          <svg class="ml-auto h-3.5 w-3.5 text-white/40 transition-transform duration-150" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div x-show="open" x-cloak class="ml-3 mt-0.5 space-y-0.5 border-l border-white/15 pl-3">
          {% if user.is_superuser or user.role == 'admin' or perms.core.manage_users %}
          <a href="{% url 'core:user_manage_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if url_name == 'user_manage_list' %}bg-white/10 text-white{% endif %}">Users</a>
          {% endif %}
          {% if user.is_superuser or user.role == 'admin' or perms.core.manage_role_permissions %}
          <a href="{% url 'core:role_permissions_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if url_name == 'role_permissions_list' %}bg-white/10 text-white{% endif %}">Roles & permissions</a>
          {% endif %}
          {% if user.is_superuser or user.role == 'admin' or user.is_staff %}
          <a href="{% url 'core:audit_log_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if url_name == 'audit_log_list' %}bg-white/10 text-white{% endif %}">Logs</a>
          {% endif %}
        </div>
      </div>
      {% endif %}

      {% endif %}

      {% comment %}
        Repository — mirrors the desktop dropdown (#1). Gated by the same
        nav_show_repository flag so it tracks the desktop's visibility rule;
        Contribute links require auth and Manage links require a repo role.
      {% endcomment %}
      {% if nav_show_repository %}
      <div x-data="{ open: {% if ns == 'repo_documents' or ns == 'repo_search' or ns == 'repo_analytics' or ns == 'repo_integration' %}true{% else %}false{% endif %} }">
        <button type="button" @click="open = !open"
          class="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-white/75 transition-colors hover:bg-white/10 hover:text-white">
          Repository
          <svg class="ml-auto h-3.5 w-3.5 text-white/40 transition-transform duration-150" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div x-show="open" x-cloak class="ml-3 mt-0.5 space-y-0.5 border-l border-white/15 pl-3">
          <p class="px-2 pt-1 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Discover</p>
          <a href="{% url 'repo_documents:browse' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_documents' and url_name == 'browse' %}bg-white/10 text-white{% endif %}">Browse</a>
          <a href="{% url 'repo_search:search' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_search' and url_name == 'search' %}bg-white/10 text-white{% endif %}">Search</a>
          <a href="{% url 'repo_search:advanced' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_search' and url_name == 'advanced' %}bg-white/10 text-white{% endif %}">Advanced search</a>
          <a href="{% url 'repo_documents:collection_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_documents' and url_name == 'collection_list' %}bg-white/10 text-white{% endif %}">Collections</a>
          {% if user.is_authenticated %}
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Contribute</p>
          <a href="{% url 'repo_documents:submit' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_documents' and url_name == 'submit' %}bg-white/10 text-white{% endif %}">Submit document</a>
          <a href="{% url 'repo_documents:saved_search_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_documents' and url_name == 'saved_search_list' %}bg-white/10 text-white{% endif %}">Saved searches</a>
          {% endif %}
          {% if nav_repo_manage or nav_repo_qa %}
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">{% if nav_repo_manage %}Manage{% else %}Review{% endif %}</p>
          <a href="{% url 'repo_documents:qa_queue' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_documents' and url_name == 'qa_queue' %}bg-white/10 text-white{% endif %}">QA queue</a>
          {% if nav_repo_manage %}
          <a href="{% url 'repo_documents:access_request_queue' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_documents' and url_name == 'access_request_queue' %}bg-white/10 text-white{% endif %}">Access requests</a>
          <a href="{% url 'repo_documents:keyword_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_documents' and url_name == 'keyword_list' %}bg-white/10 text-white{% endif %}">Keywords</a>
          <a href="{% url 'repo_documents:access_violation_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_documents' and url_name == 'access_violation_list' %}bg-white/10 text-white{% endif %}">Access violations</a>
          {% endif %}
          {% endif %}
          {% if nav_repo_analytics %}
          <a href="{% url 'repo_analytics:usage_dashboard' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'repo_analytics' and url_name == 'usage_dashboard' %}bg-white/10 text-white{% endif %}">Usage dashboard</a>
          {% endif %}
        </div>
      </div>
      {% endif %}

      {% comment %}
        SME-Hub — mirrors the desktop dropdown, gated by the same
        nav_show_smehub flag. Workspace hubs for all SME roles plus the
        admin hubs for elevated roles.
      {% endcomment %}
      {% if nav_show_smehub %}
      <div x-data="{ open: {% if ns == 'smehub_onboarding' or ns == 'smehub_incubation' or ns == 'smehub_linkage' or ns == 'smehub_marketplace' or ns == 'smehub_showcasing' or ns == 'smehub_investment' %}true{% else %}false{% endif %} }">
        <button type="button" @click="open = !open"
          class="flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-medium text-white/75 transition-colors hover:bg-white/10 hover:text-white">
          SME-Hub
          <svg class="ml-auto h-3.5 w-3.5 text-white/40 transition-transform duration-150" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div x-show="open" x-cloak class="ml-3 mt-0.5 space-y-0.5 border-l border-white/15 pl-3">
          <p class="px-2 pt-1 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Workspace</p>
          <a href="{% url 'smehub_onboarding:my_dashboard' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_onboarding' and url_name == 'my_dashboard' %}bg-white/10 text-white{% endif %}">My SME-Hub</a>
          <a href="{% url 'smehub_incubation:hub' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_incubation' and url_name == 'hub' %}bg-white/10 text-white{% endif %}">Incubation</a>
          <a href="{% url 'smehub_marketplace:hub' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_marketplace' and url_name == 'hub' %}bg-white/10 text-white{% endif %}">Marketplace</a>
          <a href="{% url 'smehub_showcasing:hub' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_showcasing' and url_name == 'hub' %}bg-white/10 text-white{% endif %}">Showcasing</a>
          <a href="{% url 'smehub_investment:hub' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_investment' and url_name == 'hub' %}bg-white/10 text-white{% endif %}">Investment</a>
          <a href="{% url 'smehub_linkage:hub' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_linkage' and url_name == 'hub' %}bg-white/10 text-white{% endif %}">Linkage &amp; Network</a>
          <a href="{% url 'smehub_showcasing:my_deal_rooms' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_showcasing' and url_name == 'my_deal_rooms' %}bg-white/10 text-white{% endif %}">Deal rooms</a>
          <a href="{% url 'smehub_onboarding:mentor_directory' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_onboarding' and url_name == 'mentor_directory' %}bg-white/10 text-white{% endif %}">Mentor directory</a>
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Help</p>
          <a href="{% url 'smehub_onboarding:faq' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_onboarding' and url_name == 'faq' %}bg-white/10 text-white{% endif %}">FAQ</a>
          <a href="{% url 'smehub_onboarding:community_archive' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_onboarding' and url_name == 'community_archive' %}bg-white/10 text-white{% endif %}">Community archive</a>
          {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'sme_admin' or user.role == 'mel_officer' or user.role == 'programme_officer' %}
          <p class="px-2 pt-2 pb-0.5 font-meta text-[9px] uppercase tracking-[0.14em] text-white/35">Admin</p>
          {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'sme_admin' or user.role == 'programme_officer' %}
          <a href="{% url 'smehub_incubation:competition_list' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if ns == 'smehub_incubation' and url_name == 'competition_list' %}bg-white/10 text-white{% endif %}">Competitions</a>
          {% endif %}
          {% if user.is_superuser or user.role == 'admin' or user.role == 'system_admin' or user.role == 'sme_admin' %}
          <a href="{% url 'smehub_admin_verification' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if url_name == 'smehub_admin_verification' %}bg-white/10 text-white{% endif %}">Verification</a>
          <a href="{% url 'smehub_admin_pipeline' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if url_name == 'smehub_admin_pipeline' %}bg-white/10 text-white{% endif %}">Pipeline</a>
          <a href="{% url 'smehub_admin_operations' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if url_name == 'smehub_admin_operations' %}bg-white/10 text-white{% endif %}">Operations</a>
          <a href="{% url 'smehub_onboarding:sme_analytics' %}" @click="mobileOpen=false" class="flex rounded-md px-2.5 py-1.5 text-sm text-white/75 transition-colors hover:bg-white/10 hover:text-white {% if url_name == 'sme_analytics' %}bg-white/10 text-white{% endif %}">Analytics</a>
          {% endif %}
          {% endif %}
        </div>
      </div>
      {% endif %}
    </nav>
  </div>

</header>
{% endwith %}