/*
 * Card-style stacked tables: Filament enables stackedOnMobile below `sm` (640px).
 * Extend the same card layout through tablet until `lg` (1024px).
 */
@media (max-width: 1023px) {
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        background-color: transparent;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr:not(.fi-ta-group-header-row):not(.fi-ta-summary-row):not(.fi-ta-summary-header-row) {
        position: relative;
        display: block;
        margin: 0;
        padding-block: 0.25rem;
        border-radius: 0.75rem;
        background-color: #fff;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        outline: 1px solid rgb(0 0 0 / 0.05);
    }

    .dark .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr:not(.fi-ta-group-header-row):not(.fi-ta-summary-row):not(.fi-ta-summary-header-row) {
        background-color: rgb(255 255 255 / 0.05);
        outline-color: rgb(255 255 255 / 0.1);
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-selected:not(.fi-ta-group-header-row):not(.fi-ta-summary-row):not(.fi-ta-summary-header-row) {
        outline-color: color-mix(in oklab, var(--primary-500) 35%, transparent);
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-selected:not(.fi-ta-group-header-row):not(.fi-ta-summary-row):not(.fi-ta-summary-header-row)::before {
        display: none;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) {
        padding-inline: 1rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:first-of-type:not(.fi-ta-selection-cell) {
        padding-top: 0.75rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:last-of-type {
        padding-bottom: 0.75rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell {
        top: 0.75rem;
        inset-inline-end: 1rem;
    }
}

/*
 * Undo Filament's `sm:` switch back to a classic table, until `lg`.
 */
@media (min-width: 640px) and (max-width: 1023px) {
    .fi-ta-table.fi-ta-table-stacked-on-mobile {
        display: block !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > thead {
        display: block !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > thead:not(:has(.fi-ta-table-stacked-header-row)) {
        display: none !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > thead > tr:not(.fi-ta-table-stacked-header-row) {
        display: none !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > thead > tr > .fi-ta-header-cell,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > thead > tr > .fi-ta-selection-cell {
        display: none !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody {
        display: flex !important;
        flex-direction: column !important;
        white-space: normal !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr {
        position: relative !important;
        display: block !important;
        padding-block: 0.25rem !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-selected::before {
        display: none !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-selected > *:first-child::before {
        display: none !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr.fi-ta-group-header-row > td {
        display: block !important;
        width: 100% !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell {
        position: absolute !important;
        inset-inline-end: 1rem !important;
        top: 0.75rem !important;
        width: auto !important;
        padding: 0 !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr:not(.fi-ta-group-header-row):not(.fi-ta-summary-row):not(.fi-ta-summary-header-row) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.35rem;
        align-items: start;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) {
        display: block !important;
        min-width: 0;
        padding-inline: 1rem !important;
        padding-block: 0 !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell > .fi-ta-cell-label {
        display: block !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) {
        grid-column: 1 / -1;
        padding-block: 0.5rem !important;
        padding-inline: 1rem !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:has(.fi-ta-actions) > .fi-ta-actions {
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }

    .fi-ta-table-stacked-header-row {
        display: block !important;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-text:not(.fi-inline),
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-icon,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-image,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-color,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-checkbox,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-toggle,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-select,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-text-input {
        padding: 0 !important;
    }
}