@if(!empty($account['salaryList']))
    {{--
        This div is now constrained in width and centered,
        which will pull the two columns closer together on wide screens.
    --}}
    <div class="table-responsive" style="max-width: auto; margin: auto;">
        
        {{-- Added .table-striped and .table-hover --}}
        <table class="table table-sm table-bordered table-striped table-hover" style="text-align: center;">
            <thead class="thead-light">
                <tr>
                    <th>Salary credited date</th>
                    <th>Description </th>
                    <th class="text-right">Amount</th>
                </tr>
            </thead>
            <tbody>
                {{-- Loop vertically: Create one new row for each salary --}}
                @foreach($account['salaryList'] as $salary)
                    <tr>
                        <td>
                            {{ isset($salary['date']) ? \Carbon\Carbon::parse($salary['date'])->format('d-M-Y') : '-' }}
                        </td>
                        <td style="white-space: normal; word-break: break-word; max-width: auto;">
                            {{ isset($salary['narration']) ? ($salary['narration']) : 'NA'}}
                        </td>
                        <td class="text-right" style="font-family: sans-serif;">
                            &#8377; {{ $salary['amount'] ?? '-' }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@else
    <p class="text-muted">No salary details found for this account.</p>
@endif