/* Carregar depois de site.css. Breakpoint.Sm do MudBlazor 9.10 usa max-width: 960px. */
.ss-mobile-grid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.ss-mobile-grid .ss-grid-tools-toggle {
    display: none;
}

@media (min-width: 960.02px) {
    /* Título e controles em duas linhas, sem somar os três ícones à largura do texto. */
    .ss-mobile-grid .mud-table-head .column-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        white-space: normal;
    }

    .ss-mobile-grid .mud-table-head .sortable-column-header {
        white-space: normal;
    }

    /* Mud 9.10 usa flex-direction: inherit nas opções. Mantê-las lado a lado. */
    .ss-mobile-grid .mud-data-grid .mud-table-cell .column-header .column-options {
        flex-direction: row;
    }

    .ss-mobile-grid .mud-table-head .mud-icon-button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        padding: 5px;
    }

    .ss-mobile-grid .mud-table-row .ss-grid-description {
        min-width: 180px;
    }

    .ss-mobile-grid .mud-table-body [data-label="Usuario"],
    .ss-mobile-grid .mud-table-body [data-label="Vendedor"] {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 960px) {
    .ss-mobile-grid .ss-grid-tools-toggle {
        display: inline-flex;
        min-height: 44px;
        margin-bottom: 12px;
        max-width: 100%;
        white-space: normal;
    }

    .ss-mobile-grid .mud-table-container {
        overflow: visible;
    }

    .ss-mobile-grid .mud-table-root,
    .ss-mobile-grid .mud-table-root .mud-table-body {
        display: block;
        width: 100%;
        border: 0;
    }

    .ss-mobile-grid .mud-table-root .mud-table-body > .mud-table-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
        padding: 8px 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--mud-default-borderradius);
        background: var(--mud-palette-surface);
    }

    /* Anula larguras inline e o nowrap das tabelas apenas no modo cartão. */
    .ss-mobile-grid .mud-table-root .mud-table-row .mud-table-cell {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        padding: 6px 0;
        padding-inline: 0;
        gap: 8px;
        border: 0;
    }

    .ss-mobile-grid .mud-table-body .mud-table-cell {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }

    .ss-mobile-grid .mud-table-body .mud-table-cell::before {
        flex: 0 0 42%;
        min-width: 0;
        padding: 0;
        color: var(--mud-palette-text-secondary);
        font-size: 0.8125rem;
        font-weight: 400;
    }

    .ss-mobile-grid .mud-table-root .mud-table-body .ss-grid-description {
        order: -1;
        display: block;
        padding-bottom: 12px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--mud-palette-table-lines);
        font-size: 1rem;
        font-weight: 600;
    }

    .ss-mobile-grid .mud-table-body .ss-grid-description::before {
        display: block;
        margin-bottom: 2px;
    }

    .ss-mobile-grid .mud-table-body [data-label="Código"],
    .ss-mobile-grid .mud-table-body [data-label="Total"],
    .ss-mobile-grid .mud-table-body [data-label="V. Total"] {
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .ss-mobile-grid .mud-table-root .mud-table-body .ss-grid-actions {
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--mud-palette-table-lines);
        font-size: 0; /* Espaços   legados não criam mais colunas entre os botões. */
    }

    .ss-mobile-grid .mud-table-body .ss-grid-actions::before {
        flex: 1 1 auto;
        margin-right: auto;
    }

    .ss-mobile-grid .ss-grid-actions button.mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    /* Mantém os HeaderCells originais: mesmos filtros tipados, estado e ordenação. */
    .ss-mobile-grid.ss-grid-tools-open .mud-table-root .mud-table-head,
    .ss-mobile-grid.ss-grid-tools-open .mud-table-root .mud-table-head > .mud-table-row {
        display: block;
    }

    .ss-mobile-grid.ss-grid-tools-open .mud-table-root .mud-table-head {
        margin-bottom: 12px;
        padding: 8px 12px;
        background: var(--mud-palette-background-gray);
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--mud-default-borderradius);
    }

    .ss-mobile-grid .mud-table-head .mud-table-cell::before {
        content: none;
    }

    .ss-mobile-grid .mud-table-head .column-header {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        width: 100%;
    }

    .ss-mobile-grid .mud-table-head .column-header > :first-child {
        flex: 1 1 100px;
        min-width: 0;
    }

    .ss-mobile-grid .mud-table-root .mud-table-head .ss-grid-actions {
        display: none;
    }

    .ss-mobile-grid .mud-table-head .column-options .mud-icon-button-label,
    .ss-mobile-grid .mud-table-head .sort-direction-icon {
        opacity: 1 !important;
    }

    .ss-mobile-grid .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 8px 0;
        padding-inline: 0;
        min-height: 52px;
    }

    .ss-mobile-grid .mud-table-pagination-caption,
    .ss-mobile-grid .mud-table-pagination-actions {
        margin: 0 !important;
        margin-inline: 0 !important;
    }

    .ss-mobile-grid .mud-select {
        margin: 0 !important;
    }

    /* Popovers são renderizados pelo provider fora da grade. Escopo: páginas com MobileGrid. */
    body:has(.ss-mobile-grid) .filters-panel,
    body:has(.ss-mobile-grid) .column-filter-popup {
        max-width: calc(100vw - 24px) !important;
    }

    body:has(.ss-mobile-grid) .filters-panel .mud-grid-item {
        flex-basis: 100%;
        max-width: 100%;
    }
}