@push('page_css')
<style>
    #leads-index-root { overflow: visible !important; }
    .leads-table { overflow-x: auto; overflow-y: visible; }
    .project-box { overflow: visible; }
    .heading-btn-sec { flex-wrap: wrap; gap: 8px; }
    .heading-btn { flex-wrap: wrap; gap: 6px; }
    th.sortable-col { cursor: pointer; white-space: nowrap; }
    th.sortable-col:hover { background-color: rgba(0,0,0,.04); }
    @media (max-width: 768px) {
        .heading-btn-sec h3 { font-size: 16px; }
        .heading-btn .search-field input { width: 120px; }
        #tableFilterPanel .col-md-2 { flex: 0 0 50%; max-width: 50%; }
    }
    @media (max-width: 480px) {
        #tableFilterPanel .col-md-2 { flex: 0 0 100%; max-width: 100%; }
    }
</style>
@endpush

<div class="project-box" @if($viewMode !== 'table') style="display:none;" @endif>
    @if(isset($headingOptions))
    <div class="heading-btn-sec ipad_column">
        <h3>{{ $module ?? '' }}
            <span id="tableSelectionCounter" class="badge ms-2"
                  style="background-color: #16C4C0; color: #fff; font-size: 13px; padding: 6px 14px; border-radius: 4px; display:none; vertical-align: middle;">
            </span>
        </h3>
        <div class="heading-btn">
            @foreach($headingOptions as $option)
                {!! $option !!}
            @endforeach
        </div>
    </div>
    @endif

    <div class="table-responsive project-table leads-table mt-2" id="leads-table-wrapper">
        <table class="table custom-table mb-0">
            @include('admin.components.form-header-fields')
            @include('admin.components.form-data-fields')
        </table>
    </div>

    @include('admin.components.pagination')
</div>