@php
    $title = $name($sec);
    $total = (float)($sec->total ?? 0);
    $lines = $sec->lines ?? [];
    $badge = $meta ?? ['cls'=>'badge-soft-dark','icon'=>'fa-layer-group','label'=>'Section'];
@endphp

<style>
    /* section styles (light) */
    .secx{
        border:1px solid var(--border);
        border-radius:16px;
        background:#fff;
        overflow:hidden;
        box-shadow: 0 10px 22px rgba(0,0,0,.05);
        margin-bottom:12px;
    }
    .secx-h{
        padding: 12px 14px;
        display:flex; justify-content:space-between; align-items:center; gap:10px;
        cursor:pointer;
        background: linear-gradient(180deg, #fff, var(--bg));
        border-bottom:1px solid var(--border);
    }
    .secx-h .left{ display:flex; align-items:center; gap:10px; font-weight:900; }
    .secx-h .chev{
        width:28px; height:28px; border-radius:10px;
        display:flex; align-items:center; justify-content:center;
        background: rgba(17,24,39,.06);
        border:1px solid rgba(17,24,39,.08);
    }
    .secx.open .chev i{ transform: rotate(90deg); }
    .secx-h .right{ display:flex; align-items:center; gap:10px; }

    .amount-pill{
        display:inline-flex; align-items:center; gap:8px;
        border-radius:999px;
        padding:6px 10px;
        font-size:12px;
        font-weight:900;
        border:1px solid var(--border);
        background:#fff;
        white-space:nowrap;
    }
    .amount-pill.good{ border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.08); color:#14532d; }
    .amount-pill.bad{ border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.08); color:#7f1d1d; }

    .secx-b{ display:none; }
    .secx.open .secx-b{ display:block; }

    .tblx thead th{
        font-size:12px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.4px;
        background:#0f172a;
        color:#fff;
        white-space:nowrap;
    }
    .keycode{
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(17,24,39,.06);
        border:1px solid rgba(17,24,39,.10);
        display:inline-block;
    }
</style>

<div class="secx">
    <div class="secx-h">
        <div class="left">
            <div class="chev"><i class="fa fa-chevron-right"></i></div>

            <span class="badgex {{ $badge['cls'] }}">
                <i class="fa {{ $badge['icon'] }}"></i>
                {{ $badge['label'] }}
            </span>

            <span style="display:flex; align-items:center; gap:10px;">
                <i class="fa {{ $sec->icon ?? 'fa-layer-group' }}"></i>
                <span>{{ $title }}</span>
            </span>
        </div>

        <div class="right">
            <span class="amount-pill {{ $total>=0 ? 'good' : 'bad' }}">
                <i class="fa {{ $total>=0 ? 'fa-circle-plus' : 'fa-circle-minus' }}"></i>
                {{ number_format($total, 2) }}
            </span>
        </div>
    </div>

    <div class="secx-b">
        <div class="table-responsive">
            <table class="table table-sm table-bordered align-middle mb-0 tblx">
                <thead>
                    <tr>
                        <th style="width:170px;">Key</th>
                        <th>Name</th>
                        <th class="text-end" style="width:220px;">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($lines as $l)
                        @php $amt = (float)($l->amount ?? 0); @endphp
                        <tr>
                            <td><span class="keycode">{{ $l->key ?? '' }}</span></td>
                            <td class="text-muted fw-bold">{{ $name($l) }}</td>
                            <td class="text-end fw-bold" style="color:{{ $amt < 0 ? 'var(--bad)' : 'var(--text)' }}">
                                {{ number_format($amt, 2) }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="text-center text-muted py-3">No data</td>
                        </tr>
                    @endforelse
                </tbody>
                <tfoot class="table-light">
                    <tr>
                        <th colspan="2" class="text-end">Total</th>
                        <th class="text-end">{{ number_format($total, 2) }}</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>