@* ── Responsive base page: filter above grid, collapsible ── *@
<MudStack Spacing="0" Class="base-page">

    @* ── Header row: page title + filter toggle ── *@
    @if (Filters != null)
    {
        <MudPaper Outlined="true" Class="rounded-lg mb-3 base-page__filter-panel">
            <MudStack Row="true" AlignItems="AlignItems.Center" Class="pa-3 cursor-pointer"
                       @onclick="ToggleFilterPanel">
                <MudIcon Icon="@Icons.Material.Filled.FilterList" Size="Size.Small"
                         Color="@(IsFiltered ? Color.Primary : Color.Default)" />
                <MudText Typo="Typo.subtitle2" Class="mx-1">فیلترها</MudText>
                @if (IsFiltered)
                {
                    <MudChip T="string" Color="Color.Primary" Size="Size.Small" Variant="Variant.Text">فعال</MudChip>
                }
                <MudSpacer />
                <MudIcon Icon="@(_filterOpen ? Icons.Material.Filled.ExpandLess : Icons.Material.Filled.ExpandMore)"
                         Size="Size.Small" />
            </MudStack>

            @if (_filterOpen)
            {
                <MudDivider />
                <div class="pa-3">
                    <MudGrid Spacing="2">
                        @Filters
                    </MudGrid>
                    <MudStack Row="true" Justify="Justify.FlexEnd" Class="mt-3" Spacing="2">
                        @if (IsFiltered)
                        {
                            <MudButton Color="Color.Error" Variant="Variant.Text" Size="Size.Small"
                                       OnClick="@(async () => await OnClearFilterClick.InvokeAsync())">
                                پاک کردن فیلتر
                            </MudButton>
                        }
                        <MudButton Variant="Variant.Filled" Color="Color.Primary" Size="Size.Small"
                                   StartIcon="@Icons.Material.Filled.Search"
                                   OnClick="@(async () => await OnSubmitClick.InvokeAsync())">
                            جستجو
                        </MudButton>
                    </MudStack>
                </div>
            }
        </MudPaper>
    }

    @* ── Content area (DataGrid or custom layout) ── *@
    <MudPaper Outlined="true" Class="rounded-lg base-page__content" Style="overflow:hidden; position:relative;">
        @Content
    </MudPaper>

</MudStack>

