@php
    // Segmented switch between the two costing surfaces, so "Job Costing" no
    // longer needs its own sidebar entry:
    //   • Costing Rates, the rate master (labour/overhead/ink rates + markup
    //                     defaults) used to cost products.
    //   • Job Costing  , bottom-up worksheets for bespoke jobs → quote/product.
    $tabs = [
        ['route' => 'costing.index',            'pattern' => 'costing.index',        'label' => __('Costing Rates'), 'icon' => 'adjustments-horizontal'],
        ['route' => 'costing.worksheets.index', 'pattern' => 'costing.worksheets.*', 'label' => __('Job Costing'),   'icon' => 'calculator'],
    ];

    $itemBase   = 'group inline-flex shrink-0 items-center gap-2 rounded-xl px-3.5 py-2 text-sm font-semibold transition';
    $itemActive = 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200/70';
    $itemIdle   = 'text-slate-500 hover:bg-white/70 hover:text-slate-800';
@endphp

<nav aria-label="{{ __('Costing sections') }}"
     class="no-scrollbar flex max-w-full items-center gap-1 overflow-x-auto rounded-2xl bg-slate-100/80 p-1 ring-1 ring-slate-200/70">
    @foreach ($tabs as $tab)
        @php $active = request()->routeIs($tab['pattern']); @endphp
        <a href="{{ route($tab['route']) }}" wire:navigate
           @class([$itemBase, $itemActive => $active, $itemIdle => ! $active])
           @if ($active) aria-current="page" @endif>
            <x-icon :name="$tab['icon']" class="h-4 w-4 {{ $active ? 'text-indigo-500' : 'text-slate-400 group-hover:text-slate-500' }}" />
            {{ $tab['label'] }}
        </a>
    @endforeach
</nav>