/*
 * dialog-ux.css - app-wide dialog sizing. See DialogUx/README.md.
 * Only min-width / phone rules: an explicit MaxWidth/FullWidth on a dialog still wins.
 */

/* Desktop: a dialog never collapses to its content's intrinsic width (cramped forms, wrapped labels). */
.mud-dialog:not(.mud-dialog-fullscreen) {
    min-width: min(32rem, calc(100vw - 1rem));
}

/* Never wider than the viewport. :where() = zero specificity, so MudBlazor's own MaxWidth classes
   (.mud-dialog-width-sm { max-width: 600px } etc.) still win; this only caps dialogs with no MaxWidth. */
:where(.mud-dialog) {
    max-width: calc(100vw - 1rem);
}

/* Phone: use the horizontal space - near edge-to-edge, scroll inside the dialog not the page. */
@media (max-width: 600px) {
    .mud-dialog:not(.mud-dialog-fullscreen) {
        width: calc(100vw - 1rem);
        min-width: 0;
        max-width: calc(100vw - 1rem);
        margin: 0.5rem;
        max-height: calc(100dvh - 1rem);
    }

    .mud-dialog .mud-dialog-content {
        overflow-y: auto;
        overflow-x: hidden;
    }
}