<div class="navbar-nav align-items-center kt-shell-header-tools">
  <!-- ── Mode toggle — single icon button ────────────────────────────── -->
  <button type="button"
          class="nav-link btn btn-link p-0 me-1 zt-mode-toggle kt-shell-icon-button"
          title="<%= i18n.__('common.toggleMode') %>"
          aria-label="<%= i18n.__('common.toggleMode') %>"
          data-zt-light-label="<%= i18n.__('common.switchToLight') %>"
          data-zt-dark-label="<%= i18n.__('common.switchToDark') %>"
          data-zt-current-style="light"
          style="line-height:1;color:var(--zt-text);font-size:1.25rem">
    <i class="fas fa-moon" aria-hidden="true"></i>
  </button>

  <!-- ── Theme colour picker ─────────────────────────────────────────── -->
  <div class="nav-item dropdown me-2 me-xl-0 kt-shell-theme-picker" id="zt-theme-picker">
    <a class="nav-link dropdown-toggle hide-arrow kt-shell-icon-button" href="javascript:void(0);"
       data-bs-toggle="dropdown" aria-label="<%= i18n.__('common.themePicker') %>" aria-expanded="false"
       aria-haspopup="true">
      <i id="zt-theme-icon" class="fas fa-palette" style="color:var(--zt-primary);font-size:1.25rem" aria-hidden="true"></i>
    </a>

    <div class="dropdown-menu dropdown-menu-start zt-picker__panel p-3 shadow-sm" style="min-width: 340px;">

      <!-- Designer palettes (existing) -->
      <p class="zt-picker__label mb-2"><%= i18n.__('common.themeLabel') %></p>
      <div class="d-flex flex-wrap gap-2" role="group" aria-label="<%= i18n.__('common.themePicker') %>">
        <button type="button" class="zt-picker__swatch" data-zt-theme="linear"
                title="Linear" style="background:#7C3AED" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="vercel"
                title="Vercel" style="background:#0070F3" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="supabase"
                title="Supabase" style="background:#3ECF8E" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="stripe"
                title="Stripe" style="background:#635BFF" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="notion"
                title="Notion" style="background:#2383E2" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="claude"
                title="Claude" style="background:#C65D3B" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="apple"
                title="Apple" style="background:#0071E3" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="black"
                title="Black" style="background:#0F0F10" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="glass"
                title="Glass" style="background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(200,200,255,0.4));border:1px solid rgba(0,0,0,0.1)" aria-pressed="false"></button>
      </div>

      <!-- Gradient palettes (new — from gradient_themes.md) -->
      <p class="zt-picker__label mt-3 mb-2"><%= i18n.__('common.themeGradient') %></p>
      <div class="d-flex flex-wrap gap-2" role="group" aria-label="<%= i18n.__('common.themeGradient') %>">
        <button type="button" class="zt-picker__swatch" data-zt-theme="aurora-ai"
                title="Aurora AI"
                style="background:linear-gradient(135deg,#6C63FF 0%,#8B5CF6 60%,#06B6D4 100%)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="cosmic-fusion"
                title="Cosmic Fusion"
                style="background:linear-gradient(135deg,#667eea,#764ba2)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="neural"
                title="Neural"
                style="background:linear-gradient(135deg,#3B82F6,#8B5CF6,#EC4899)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="mango-tango"
                title="Mango Tango"
                style="background:linear-gradient(135deg,#FF512F,#F09819)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="mint-leaf"
                title="Mint Leaf"
                style="background:linear-gradient(135deg,#11998E,#38EF7D)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="arctic-sky"
                title="Arctic Sky"
                style="background:linear-gradient(135deg,#4FACFE,#00F2FE)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="quantum-aurora"
                title="Quantum Aurora"
                style="background:linear-gradient(135deg,#5B247A,#1BCEDF 50%,#38EF7D)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="eclipse-aurora"
                title="Eclipse Aurora"
                style="background:linear-gradient(135deg,#000428,#004E92 60%,#11998E)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="deep-pine"
                title="Deep Pine"
                style="background:linear-gradient(135deg,#0A0E0B,#04342C 50%,#11998E)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="hacker-mode"
                title="Hacker Mode"
                style="background:linear-gradient(135deg,#050505,#0A3D2E 50%,#39FF14)" aria-pressed="false"></button>
      </div>

      <!-- Mesh palettes (new, force-dark via data-zt-force-dark) -->
      <p class="zt-picker__label mt-3 mb-2"><%= i18n.__('common.themeMesh') %></p>
      <div class="d-flex flex-wrap gap-2" role="group" aria-label="<%= i18n.__('common.themeMesh') %>">
        <button type="button" class="zt-picker__swatch" data-zt-theme="bioluminescent-mesh"
                data-zt-force-dark="true" title="Bioluminescent Mesh"
                style="background:radial-gradient(circle at 20% 30%, rgba(57,255,20,.4) 0%, transparent 40%),
                                  radial-gradient(circle at 80% 70%, rgba(0,230,118,.3) 0%, transparent 50%),
                                  linear-gradient(135deg,#000,#0A3D2E)" aria-pressed="false"></button>
        <button type="button" class="zt-picker__swatch" data-zt-theme="aurora-mesh"
                data-zt-force-dark="true" title="Aurora Mesh"
                style="background:radial-gradient(ellipse at top right,#11998E 0%,transparent 60%),
                                  radial-gradient(ellipse at bottom left,#04342C 0%,transparent 70%),#000" aria-pressed="false"></button>
      </div>
    </div>
  </div>

  <!-- ── Language toggle ─────────────────────────────────────────────── -->
  <a href="/dashboard/changeLanguage/<%= i18n.getLocale() === 'ar' ? 'en' : 'ar' %>"
     class="nav-link btn btn-link p-0 ms-1 zt-lang-toggle kt-shell-language-toggle"
     title="<%= i18n.getLocale() === 'ar' ? i18n.__('common.switchToEnglish') : i18n.__('common.switchToArabic') %>"
     aria-label="<%= i18n.getLocale() === 'ar' ? i18n.__('common.switchToEnglish') : i18n.__('common.switchToArabic') %>"
     style="line-height:1;color:var(--zt-text);font-size:0.85rem;text-decoration:none">
    <i class="fas fa-globe" aria-hidden="true" style="font-size:1.1rem;margin-inline-end:0.3rem"></i><span style="font-weight:700"><%= i18n.getLocale() === 'ar' ? 'EN' : 'ع' %></span>
  </a>
</div>
