/*
 * Cross-cutting responsive rules. Page- and component-specific media queries
 * should live in their scoped .razor.css file. Keep this file for rules that
 * affect global widgets (data grids, navigation, dialogs).
 *
 * Breakpoints follow MudBlazor:
 *   xs: 0      - 599  (phones)
 *   sm: 600    - 959  (large phones / small tablets)
 *   md: 960    - 1279 (tablets / small laptops)
 *   lg: 1280+  desktop
 */

/* ---- Phone (xs): full width, less padding ---- */
@media (max-width: 599px) {
    /* Inputs above grids should fill the row instead of side-by-side */
    .datagrid-search-input,
    .datagrid-select-input {
        max-width: 100%;
        min-width: 0;
    }

    /* MudBlazor wraps elevation-1 tables in a margin halo that overflows on phones */
    .mud-table.mud-elevation-1 {
        margin: 4px;
        width: 100%;
    }

    /* Dialogs: take nearly the whole viewport and tighten padding.
       MudBlazor's default .mud-dialog max-width is 600px on a centred
       container, which leaves a cramped 322px form on a 390px screen. */
    .mud-dialog {
        max-width: 96vw !important;
        width: 96vw !important;
        margin: 8px !important;
    }
    .mud-dialog.mud-dialog-fullwidth {
        max-width: 96vw !important;
    }
    .mud-dialog .mud-dialog-content {
        padding: 12px;
    }
    /* Stack dialog actions vertically and let each button fill the row, so the
       primary action is a full-width, easy-to-tap target instead of two or three
       buttons cramped onto one narrow line. column-reverse keeps the primary
       (last in markup, e.g. Save/Submit) on top. */
    .mud-dialog .mud-dialog-actions {
        padding: 8px 12px;
        gap: 8px;
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .mud-dialog .mud-dialog-actions .mud-button {
        width: 100%;
        margin: 0;
        min-width: 0;
    }

    /* Page-level MudContainer padding consumes a lot of width on phones */
    .mud-container.mud-container--gutters {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* App bar / nav buttons get tight on phones */
    .mud-appbar .mud-button {
        padding: 4px 8px;
        min-width: 0;
    }

    /* MudToolBar usually packs filters, action buttons, and a search field
       in one row. On phones, let page-content toolbars wrap so controls stack
       instead of overflowing the viewport. Selects inside the toolbar take
       the full width of their row. The :not(.mud-toolbar-appbar) guard keeps
       these rules from affecting the top MudAppBar, which has its own
       constrained icon set and must stay on a single row. */
    .mud-toolbar:not(.mud-toolbar-appbar) {
        flex-wrap: wrap;
        gap: 8px;
        height: auto;
        min-height: auto;
        padding: 8px;
    }
    .mud-toolbar:not(.mud-toolbar-appbar) .mud-input-control,
    .mud-toolbar:not(.mud-toolbar-appbar) .mud-select {
        width: 100%;
        min-width: 0;
    }
    .mud-toolbar:not(.mud-toolbar-appbar) .mud-button {
        padding: 6px 10px;
        min-width: 0;
    }
    /* The MudSpacer that pushes toolbar buttons to the right is unhelpful
       on phones; flatten it so buttons stay on the same line as the
       previous element. Skipped for the AppBar since its spacer is what
       keeps the title left of the right-side icons. */
    .mud-toolbar:not(.mud-toolbar-appbar) .mud-spacer {
        flex-grow: 0;
        width: 0;
    }

    /* MudStack Row=true renders as .d-flex.flex-row. Inside a MudPaper, the
       usual pattern is a filter row with chips/switches on the left and an
       action button on the right (Events page, etc.). On phones, let those
       rows wrap so the button does not push controls off-screen. */
    .mud-paper .d-flex.flex-row {
        flex-wrap: wrap;
    }

    /* Justify.SpaceBetween on a wrapped row leaves a big gap between
       wrapped lines; switch to flex-start so wrapped buttons sit beside
       the controls they belong to. */
    .mud-paper .d-flex.flex-row.justify-space-between {
        justify-content: flex-start;
        gap: 8px;
    }

    /* MudDataGrid ColGroup col elements often have hardcoded width attributes
       (e.g. <col width="400" /> for a description column) that were sized
       for desktop. On phones those fixed widths force the table-container
       to scroll horizontally even when the columns would otherwise fit.
       Let the columns auto-size at narrow widths. */
    .mud-data-grid colgroup col {
        width: auto !important;
    }

    /* With HorizontalScrollbar the inner table container is sized to
       max-content so the grid can scroll. When HideSmall drops enough
       columns that the remaining table is narrower than its full-width
       card, that leaves an empty band on the right of the grid. Make the
       container fill the card; min-width (not width) keeps wide tables
       free to grow and scroll. */
    .mud-data-grid .mud-table-container {
        min-width: 100%;
    }
    .mud-data-grid table.mud-table-root {
        width: 100%;
    }
}

/* ---- Tablet (sm) and up ---- */
@media (min-width: 600px) {
    .mud-table.mud-elevation-1 {
        margin: 30px 0 30px 30px;
    }
}