/*
 * Mobile-responsive overrides for MudBlazor dialogs.
 *
 * Below 600px (MudBlazor "xs" breakpoint) dialogs expand to fill the viewport
 * and drop to tighter padding so small screens are used effectively. This is
 * the shared baseline applied to every MudDialog in the app; individual
 * dialogs can still layer additional tweaks on top via scoped CSS.
 */

@media (max-width: 599.98px) {
    /* Let the dialog sit flush against the viewport edges. */
    .mud-dialog-container {
        align-items: stretch;
    }

    .mud-dialog-container > .mud-dialog {
        margin: 0;
        width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    /* Let the dialog content region scroll instead of the whole page. */
    .mud-dialog-container > .mud-dialog > .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Tighter title/actions spacing so more vertical room goes to content. */
    .mud-dialog-container > .mud-dialog > .mud-dialog-title {
        padding: 12px 16px;
    }

    .mud-dialog-container > .mud-dialog > .mud-dialog-actions {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Stepper renders an extra layer of padding on top of the dialog content.
       Trim it down so onboarding steps are not cramped inside a small area. */
    .mud-dialog-content .mud-stepper-content {
        padding: 12px;
    }

    .mud-dialog-content .mud-stepper-nav {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Very narrow handsets (e.g. 320px-wide phones). */
@media (max-width: 360px) {
    .mud-dialog-container > .mud-dialog > .mud-dialog-content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .mud-dialog-container > .mud-dialog > .mud-dialog-actions {
        padding: 6px 8px;
    }
}