.mud-dialog-width-full {
    width: calc(100% - 2rem);
}

/* Sizing helpers complement MudBlazor utilities. Like its flex/display helpers,
   these use !important so a class can explicitly override component defaults. */
.qp-min-width-0 {
    min-width: 0 !important;
}

.qp-max-width-full {
    max-width: 100% !important;
}

.qp-basis-0 {
    flex-basis: 0 !important;
}

.qp-basis-full {
    flex-basis: 100% !important;
}

.qp-width-max-content {
    width: max-content !important;
}

.qp-break-anywhere {
    overflow-wrap: anywhere !important;
}

/* Let action titles shrink while the header keeps room for both buttons. */
.qp-action-card-header .mud-card-header-content {
    min-width: 0;
}

/* MudBlazor's xs table layout includes 600px, while d-sm-* starts at 600px.
   Match HideSmall exactly so mobile table actions remain available at this edge. */
.qp-d-xs-table-only {
    display: none !important;
}

@media (max-width: 600px) {
    .qp-d-xs-table-only {
        display: inline-flex !important;
    }

    /* A primary cell carries selection, identifier and actions on one line. */
    .mud-xs-table .qp-xs-table-primary-cell::before {
        display: none;
    }

    .mud-xs-table .qp-xs-table-description-cell {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Hidden controls must not contribute checkbox overflow to the mobile table. */
    .mud-xs-table .qp-xs-table-hidden-control {
        display: none !important;
    }

    /* Restore the row separator on its last visible cell when HideSmall hides
       the final column carrying MudBlazor's default mobile bottom border. */
    .mud-xs-table .qp-xs-table-row-end {
        border-bottom: 1px solid var(--mud-palette-table-lines) !important;
    }

    /* Collapsed cell contents can overflow even with zero padding, creating
       an unwanted vertical scrollbar in the mobile table container. */
    .mud-xs-table .qp-xs-table-row-end ~ .mud-table-cell-hide {
        display: none !important;
    }
}

/* sm starts at 600px, matching MudBlazor's default breakpoint.
   Combine mud-width-full with qp-width-sm-* for full-width mobile fields. */
@media (min-width: 600px) {
    .qp-basis-sm-auto {
        flex-basis: auto !important;
    }

    .qp-width-sm-auto {
        width: auto !important;
    }

    .qp-width-sm-8rem {
        width: 8rem !important;
    }

    .qp-width-sm-12rem {
        width: 12rem !important;
    }

    .qp-width-sm-13rem {
        width: 13rem !important;
    }

    .qp-width-sm-14rem {
        width: 14rem !important;
    }
}