/*
    ============================================================================
    RasoiX — mobile filter stack
    ============================================================================

    THE API IS ONE CLASS. Put `rx-mobile-filter-stack` on the plain wrapper
    around a standard admin filter toolbar:

        <div class="rx-mobile-filter-stack">
          <MudPaper Class="rx-admin-filter-toolbar">
            <MudStack Row Class="rx-admin-filter-row">
              …controls…, Apply

    Below 960px the row becomes a column and every control in it takes the full
    content width at a 40px touch height. No parameters and no variants: a
    screen that needs something else adds its own scoped rule on top.

    WHY IT IS SHARED

    Cash Movement History and Shift History had byte-identical copies of these
    rules. `.rx-admin-filter-row` appears on twelve pages, all built the same
    way, so this is the shape of the problem rather than either screen's layout.

    WHY `> *` AND NOT `.rx-admin-filter`

    `.rx-admin-filter` is the class those pages put on their controls, but it
    lands on a different element per component: a MudSelect carries it on its
    `.mud-input-control` root, while a MudDatePicker carries it on the
    `.mud-picker` wrapper that contains its own `.mud-input-control`. Sizing the
    row's direct children instead means every control fills, whatever it is and
    wherever its class happens to land — including the Apply button.

    `min-width: 0` is required, not decorative: app.css sets a global
    `.rx-admin-filter { min-width: 180px }` floor, which at narrow widths would
    otherwise push a control past the content box. BulkTagging already
    neutralises the same floor the same way.

    A global stylesheet on purpose: Blazor's scoped CSS stamps its attribute
    onto HTML elements only, never onto a child component's root, so a
    page-scoped rule cannot address these MudBlazor elements without a wrapper
    and ::deep. A global opt-in class has no such problem.

    RULES FOR EDITING

    1. Everything lives inside @media (max-width: 960px).
    2. Everything is prefixed with .rx-mobile-filter-stack.
    3. Nothing screen-specific, and no business behaviour: this file changes
       width, alignment and touch height only. It must never alter which
       controls exist, what they hold, or when a filter applies.
    ============================================================================
*/

@media (max-width: 960px) {

    /*
        The row becomes a column. MudStack renders .flex-row, whose
        flex-direction is !important, so this has to say so too.
    */
    .rx-mobile-filter-stack .rx-admin-filter-row {
        flex-direction: column !important;
        align-items: stretch;
    }

    /*
        Every control fills the content width — selects, date pickers and the
        Apply button alike — so the filters line up with each other and with the
        cards beneath them.
    */
    .rx-mobile-filter-stack .rx-admin-filter-row > * {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /*
        Comfortable one-handed targets for controls that open a menu or a
        calendar. Carries .rx-admin-filter-toolbar so it outranks the desktop
        density rule in app.css rather than relying on stylesheet order.
    */
    .rx-mobile-filter-stack .rx-admin-filter-toolbar .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
    .rx-mobile-filter-stack .rx-admin-filter-toolbar .mud-input > div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
        height: 40px;
        min-height: 40px;
    }

    .rx-mobile-filter-stack .rx-admin-filter-row .mud-button-root {
        min-height: 40px;
    }
}