@php $wrapClass = ($wrap ?? 'emp-fund').'-wrap'; @endphp
<style>
    .{{ $wrapClass }} .card {
        border-radius: 14px;
        border: 1px solid #edf0f6;
        box-shadow: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.04);
    }
    .{{ $wrapClass }} .card-header {
        background: #fff;
        border-bottom: 1px solid #edf0f6;
        font-weight: 700;
        padding: 0.9rem 1.15rem;
    }
    .{{ $wrapClass }} .card-body.p-2 { padding: 0.5rem !important; }
    .{{ $wrapClass }} .card-footer {
        background: #fff;
        border-top: 1px solid #edf0f6;
        padding: 0.75rem 1.15rem;
    }
    .{{ $wrapClass }} .emp-fund-stat {
        background: #fff;
        border: 1px solid #edf0f6;
        border-radius: 10px;
        padding: 10px 14px;
        text-align: center;
        height: 100%;
    }
    .{{ $wrapClass }} .emp-fund-stat .num { font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
    .{{ $wrapClass }} .emp-fund-stat .lbl {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #64748b;
    }
    .{{ $wrapClass }} .emp-fund-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .{{ $wrapClass }} .emp-fund-filters {
        background: #f8fafc;
        border-bottom: 1px solid #edf0f6;
        padding: 14px 16px;
    }
    .{{ $wrapClass }} .emp-fund-filters label {
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: rgba(15, 23, 42, .55);
        margin-bottom: 6px;
    }
    .{{ $wrapClass }} .emp-fund-filters .form-group { margin-bottom: 10px; }
    @media (min-width: 992px) { .{{ $wrapClass }} .emp-fund-filters .form-group { margin-bottom: 0; } }
    .{{ $wrapClass }} .emp-fund-table { margin-bottom: 0; font-size: 13px; }
    .{{ $wrapClass }} .emp-fund-table thead th {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: rgba(15, 23, 42, .65);
        border-top: 0;
        white-space: nowrap;
        padding: 0.75rem 0.85rem;
    }
    .{{ $wrapClass }} .emp-fund-table tbody td {
        vertical-align: middle;
        padding: 0.75rem 0.85rem;
    }
    .{{ $wrapClass }} .emp-fund-empty {
        padding: 2rem 1rem !important;
        text-align: center;
        color: #64748b;
    }
    .{{ $wrapClass }} .emp-fund-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
    .{{ $wrapClass }} .emp-fund-notes {
        max-width: 200px;
        white-space: normal;
        word-break: break-word;
        font-size: 12px;
        color: #64748b;
    }
    .{{ $wrapClass }} .emp-fund-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }
    .{{ $wrapClass }} .emp-fund-badge.active { background: rgba(99, 102, 241, .12); color: #4338ca; }
    .{{ $wrapClass }} .emp-fund-badge.pending { background: rgba(245, 158, 11, .14); color: #b45309; }
    .{{ $wrapClass }} .emp-fund-badge.closed { background: rgba(34, 197, 94, .12); color: #166534; }
    .{{ $wrapClass }} .emp-fund-badge.rejected { background: rgba(239, 68, 68, .12); color: #991b1b; }
    .{{ $wrapClass }} .emp-fund-badge.default { background: rgba(100, 116, 139, .12); color: #475569; }
    .{{ $wrapClass }} .emp-fund-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
    .emp-fund-modal .modal-content {
        border: none;
        border-radius: 12px;
        box-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15);
    }
    .emp-fund-modal .modal-header,
    .emp-fund-modal .modal-footer { border-color: #edf0f6; }
    .emp-fund-modal .modal-body { max-height: 70vh; overflow-y: auto; }
    .{{ $wrapClass }} .emp-fund-label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: rgba(15, 23, 42, .55);
        margin-bottom: 6px;
    }
    .{{ $wrapClass }} .emp-fund-form-section {
        background: #f8fafc;
        border: 1px solid #edf0f6;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .{{ $wrapClass }} .emp-fund-form-section-title {
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: rgba(15, 23, 42, .55);
        margin-bottom: 0.75rem;
    }
    .{{ $wrapClass }} .emp-fund-form-section:last-child { margin-bottom: 0; }
    .{{ $wrapClass }} .emp-fund-modal-row { margin-bottom: 1rem; }
    .{{ $wrapClass }} .emp-fund-modal-row .emp-fund-form-section { margin-bottom: 0; }
    .{{ $wrapClass }} .emp-fund-cert-form {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }
    .{{ $wrapClass }} .emp-fund-cert-form select { width: auto; min-width: 90px; }
    .{{ $wrapClass }} .emp-fund-staff-cell .name { font-weight: 600; line-height: 1.3; }
    .{{ $wrapClass }} .emp-fund-staff-cell .meta { font-size: 12px; color: #64748b; }
    .{{ $wrapClass }} .emp-fund-badge.enrolled-yes { background: rgba(34, 197, 94, .12); color: #166534; }
    .{{ $wrapClass }} .emp-fund-badge.enrolled-no { background: rgba(100, 116, 139, .12); color: #475569; }
    .{{ $wrapClass }} .emp-fund-badge.settlement { background: rgba(239, 68, 68, .12); color: #991b1b; }
    .{{ $wrapClass }} .emp-fund-badge.withdrawal-kind { background: rgba(100, 116, 139, .12); color: #475569; }
    .{{ $wrapClass }} .emp-fund-badge.sep-settled { background: rgba(15, 23, 42, .1); color: #0f172a; }
    .{{ $wrapClass }} .emp-fund-badge.sep-pending { background: rgba(245, 158, 11, .14); color: #b45309; }
    .{{ $wrapClass }} .emp-fund-summary-table { font-size: 12px; }
    .{{ $wrapClass }} .emp-fund-summary-table thead th {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
    }
    .{{ $wrapClass }} .emp-fund-summary-table tbody td { font-variant-numeric: tabular-nums; }
    .{{ $wrapClass }} .emp-fund-feature-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 800;
    }
    .{{ $wrapClass }} .emp-fund-feature-badge.on { background: rgba(34, 197, 94, .12); color: #166534; }
    .{{ $wrapClass }} .emp-fund-feature-badge.off { background: rgba(245, 158, 11, .14); color: #b45309; }
</style>