{{-- Project switcher rendered as underline-style tabs.
     Params: $tabBase ('/projects' | '/quarter-targets'), $tabActive (current project), $tabQuery (e.g. '?period=2026'). --}}
@once
<style>
  .ptab-bar { display:flex; gap:.4rem; margin:.2rem 0 1.1rem; border-bottom:1px solid var(--line); }
  .ptab { position:relative; font-size:.9rem; font-weight:600; padding:.55rem 1.1rem; cursor:pointer; text-decoration:none;
    border:1px solid transparent; border-bottom:none; border-radius:var(--r-sm,8px) var(--r-sm,8px) 0 0;
    background:transparent; color:var(--muted); margin-bottom:-1px; transition:color .15s, background .15s; }
  .ptab:hover { color:var(--ink); background:color-mix(in srgb, var(--primary) 6%, transparent); }
  .ptab.on { color:var(--primary); background:var(--card); border-color:var(--line); }
  .ptab.on::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--primary); }
</style>
@endonce
@php $projOrder = ['ERP', 'CRM', 'SMPP']; @endphp
<div class="ptab-bar" role="tablist">
  @foreach ($projOrder as $p)
    <a class="ptab {{ $p === ($tabActive ?? '') ? 'on' : '' }}" role="tab"
       aria-selected="{{ $p === ($tabActive ?? '') ? 'true' : 'false' }}"
       href="{{ ($tabBase ?? '/projects') . '/' . $p . ($tabQuery ?? '') }}">{{ $p }}</a>
  @endforeach
</div>