/*
 * Case Management list page (.case-management-page) and Case Dashboard
 * (.case-dashboard-page). Phone-only tweaks to data grid toolbars, header
 * chips, and dialog spacing. The wrappers are added on the page roots in
 * CaseManagement.razor and CaseDashboard.razor.
 */

@media (max-width: 599px) {
    /* Cases list: stack the action toolbar (add case, status filter, search) */
    .case-management-page .case-list-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .case-management-page .datagrid-search-input {
        max-width: 100%;
    }

    /* Case dashboard: paper sections need less padding on phones */
    .case-dashboard-page .mud-paper {
        padding: 12px !important;
    }

    /* Header chips on the case dashboard wrap automatically (Wrap.Wrap on
       the MudStack) but the row gap from MudBlazor is too generous. */
    .case-dashboard-page .case-header-chips {
        gap: 4px !important;
    }

    .case-dashboard-page .case-header-chips .mud-chip {
        font-size: 0.7rem;
    }
}

/* The case-dashboard Orders grid has only a few columns. Left to the defaults the
   trailing action column absorbs all the slack, leaving a wide empty band between
   the status and the buttons. Keep the table full width like the other grids, but
   pin the action column to its content so the row actions sit at the right edge
   and the data columns fill the width. */
.orders-grid thead th:last-child,
.orders-grid tbody td:last-child {
    width: 1px;
    white-space: nowrap;
}

.redemption-review-table .redemption-point-cost-field {
    display: block;
    width: 120px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.redemption-review-table .redemption-point-cost-field input {
    text-align: right;
}

.redemption-review-table .mud-table-root {
    table-layout: fixed;
    width: 100%;
}

.redemption-review-table th:nth-child(2),
.redemption-review-table td:nth-child(2) {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    text-align: right !important;
}

.redemption-review-table th:nth-child(3),
.redemption-review-table td:nth-child(3) {
    width: 136px;
    min-width: 136px;
    max-width: 136px;
    text-align: right !important;
}

.redemption-review-table th:nth-child(4),
.redemption-review-table td:nth-child(4) {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    text-align: right !important;
}