
    <div id="bottom-filter-minibar" class="bottom-filter-minibar">
        <div class="position-relative">
            <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-controls="#bottom-filter-body">
                <i class="bi bi-funnel-fill"></i>&nbsp;Filters
            </button>
                                                {# show active filters count if available via GET params #}
                                                {% comment %} Compute active filters count (excluding 'page') using supported template tags {% endcomment %}
            {% with request.GET|length as param_count %}
                {% if param_count > 0 %}
                    {% if request.GET.page %}
                        {% with param_count|add:"-1" as active_count %}
                                                                {# active_count may be a string; only show badge when not zero #}
                            {% if active_count != "0" %}
                                <span class="badge bg-primary filter-count-badge">{{ active_count }}</span>
                            {% endif %}
                        {% endwith %}
                    {% else %}
                        <span class="badge bg-primary filter-count-badge">{{ param_count }}</span>
                    {% endif %}
                {% endif %}
            {% endwith %}
        </div>
    </div>

    <button class="btn btn-primary filter-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="false" aria-controls="#bottom-filter-body">Filters</button>

    <div class="floating-filter shadow-lg">
        <div id="bottom-filter-body" class="collapse">
            <div class="container-fluid">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="fw-bold">Filters</div>
                    <div>
                        <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body" aria-expanded="true">Close</button>
                    </div>
                </div>

                                                    <!-- filter body collapsible so minibar stays visible -->
                <div class="filter-body mt-2">
                    <form action="" method="get">
                        <div class="row g-3">
                            {% for field in filter.form.visible_fields %}
                                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                                    <div class="filter-card">
                                        <div class="form-group mb-1">
                                            {{ field.label_tag }}
                                        </div>
                                        <div class="form-group mb-1">
                                            {{ field }}
                                        </div>
                                        {% if field.errors %}
                                            <div class="invalid-feedback d-block">{{ field.errors|striptags }}</div>
                                        {% endif %}
                                        {% if field.help_text %}
                                            <div class="filter-help">{{ field.help_text }}</div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="mt-3 d-flex gap-2 filter-actions">
                            <button class="btn btn-primary btn-sm" type="submit"><i class="bi bi-search"></i>&nbsp;Apply</button>
                            <a class="btn btn-outline-secondary btn-sm" href="?"><i class="bi bi-arrow-counterclockwise"></i>&nbsp;Reset</a>
                            <button class="btn btn-light btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#bottom-filter-body">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

                                                <!-- Floating filter bar (fixed at bottom) -->
    <style>
        .floating-filter {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1030;
            background: var(--bs-body-bg);
            border-top: 1px solid rgba(0,0,0,0.08);
            padding: 0.5rem 0.75rem 0.5rem 0.75rem;
        }
        .floating-filter .filter-body {
            max-height: 50vh;
            overflow-y: auto;
            padding-top: .5rem;
        }
        .floating-filter .filter-toggle {
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            z-index: 1040;
        }
                                            /* minibar/tab styling - small visible handle so panel isn't fully hidden */
        .bottom-filter-minibar {
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            z-index: 1045;
            background: transparent;
        }
        .bottom-filter-minibar .btn { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }

                                            /* pretty filter cards */
        .filter-card {
            background: var(--bs-white);
            border: 1px solid rgba(0,0,0,0.04);
            border-radius: .5rem;
            padding: .5rem;
            height: 100%;
        }
        .filter-card .form-group { margin-bottom: 0; }
        .filter-card label { font-weight: 600; font-size: .9rem; }
        .filter-help { font-size: .8rem; color: #6c757d; }
        .filter-actions { padding-top: .5rem; }

                                            /* active filter count badge on minibar */
        .filter-count-badge {
            position: absolute;
            top: -6px;
            right: -6px;
        }

                                            /* Dark mode overrides */
        .floating-filter {
            background: #0f1720; /* near-black */
            color: #e6eef6;
            border-top-color: rgba(255,255,255,0.06);
        }
        .bottom-filter-minibar .btn {
            background: rgba(255,255,255,0.02);
            color: #e6eef6;
            border-color: rgba(255,255,255,0.06);
        }
        .filter-card {
            background: #0b1220;
            border-color: rgba(255,255,255,0.04);
            color: #e6eef6;
        }
                                                /* target common form-control/form-select/select/textarea so native selects and bootstrap styles
                                                   are overridden for dark theme inside filter cards */
        .filter-card .form-control,
        .filter-card .form-select,
        .filter-card input,
        .filter-card select,
        .filter-card textarea {
            background: #07101a !important;
            color: #f1f5f9 !important;
            border-color: rgba(255,255,255,0.06) !important;
        }
                                                /* options in native multi-selects */
        .filter-card select option,
        .filter-card .form-select option {
            background: #07101a !important;
            color: #f1f5f9 !important;
        }
                                                /* placeholder color */
        .filter-card .form-control::placeholder { color: rgba(255,255,255,0.5) !important; }
        .filter-help { color: #9fb0c7; }
        .badge.bg-primary.filter-count-badge { background: #0d6efd; color: #fff; }
        .btn-outline-secondary { color: #e6eef6; border-color: rgba(255,255,255,0.06); }
        .btn-light { background: #111827; color: #e6eef6; border-color: rgba(255,255,255,0.04); }
        .filter-card label { color: #e6eef6; }
    </style>
    <!-- jQuery UI for calendar datepickers (only for the filter panel) -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <script>
        (function($){
            $(function(){
                // Initialize jQuery UI datepicker on inputs marked with .datepicker
                $('.datepicker').each(function(){
                    // ensure keyboard-friendly placeholder
                    if(!$(this).attr('placeholder')) $(this).attr('placeholder','dd/mm/yyyy');
                    $(this).datepicker({
                        dateFormat: 'dd/mm/yy',
                        changeMonth: true,
                        changeYear: true,
                        showAnim: 'fadeIn'
                    });
                });
            });
        })(jQuery);
    </script>
    <script>
        (function($){
            // Convert dd/mm/yyyy date inputs to ISO yyyy-mm-dd before form submit so Django parses correctly
            $(function(){
                $('.floating-filter form').on('submit', function(e){
                    $(this).find('input.datepicker').each(function(){
                        var v = (this.value || '').trim();
                        if(!v) return;
                        // match dd/mm/yyyy or d/m/yyyy
                        var m = v.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
                        if(m){
                            var day = m[1].padStart(2,'0');
                            var month = m[2].padStart(2,'0');
                            var year = m[3];
                            this.value = year + '-' + month + '-' + day; // ISO format
                        }
                    });
                });
            });
        })(jQuery);
    </script>