<div class="card mb-4">
    <div class="card-body py-2 px-3">
        <ul class="nav nav-pills gap-1" style="flex-wrap:nowrap;overflow-x:auto">
            <li class="nav-item">
                <a href="{{ route('settings.general') }}"
                   class="nav-link {{ ($active??'')==='general'?'active':'' }}" style="font-size:13px;white-space:nowrap">
                    <i class="bi bi-building me-1"></i>General
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('settings.accounting') }}"
                   class="nav-link {{ ($active??'')==='accounting'?'active':'' }}" style="font-size:13px;white-space:nowrap">
                    <i class="bi bi-calculator me-1"></i>Accounting
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('settings.inventory') }}"
                   class="nav-link {{ ($active??'')==='inventory'?'active':'' }}" style="font-size:13px;white-space:nowrap">
                    <i class="bi bi-box-seam me-1"></i>Inventory
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('settings.arap') }}"
                   class="nav-link {{ ($active??'')==='arap'?'active':'' }}" style="font-size:13px;white-space:nowrap">
                    <i class="bi bi-arrow-left-right me-1"></i>AR &amp; AP
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('settings.payroll') }}"
                   class="nav-link {{ ($active??'')==='payroll'?'active':'' }}" style="font-size:13px;white-space:nowrap">
                    <i class="bi bi-wallet2 me-1"></i>Payroll
                </a>
            </li>
            <li class="nav-item">
                <a href="{{ route('settings.security') }}"
                   class="nav-link {{ ($active??'')==='security'?'active':'' }}" style="font-size:13px;white-space:nowrap">
                    <i class="bi bi-shield-lock me-1"></i>System
                </a>
            </li>
        </ul>
    </div>
</div>
