/* Keep Filament's workspace inside the viewport at every screen size. */
.fi-main-ctn,
.fi-main,
.fi-page,
.fi-page-content,
.fi-ta-ctn,
.fi-ta-content-ctn,
.fi-ta-content {
    min-width: 0;
    max-width: 100%;
}

.fi-main-ctn {
    overflow-x: clip;
}

.fi-main {
    padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
}

.fi-main-ctn > .fi-page {
    padding: clamp(0.75rem, 1.25vw, 1.25rem);
}

.fi-ta-content-ctn {
    overflow-x: auto;
}

.fi-ta-table {
    width: 100%;
    max-width: 100%;
}

.fi-ta-table th,
.fi-ta-table td,
.fi-ta-table .fi-ta-col {
    overflow-wrap: anywhere;
    word-break: normal;
}

.fi-ta-table tbody {
    white-space: normal;
}

@media (max-width: 63.999rem) {
    .fi-ta-table.fi-ta-table-stacked-on-mobile {
        display: block;
        width: 100%;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > thead,
    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody {
        display: block;
        width: 100%;
    }

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

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr {
        position: relative;
        display: block;
        width: 100%;
        padding-block: 0.5rem;
        white-space: normal;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-cell:not(.fi-ta-selection-cell) {
        display: block;
        width: 100%;
        padding: 0.25rem 1rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-cell-label {
        display: block !important;
        padding-top: 0.4rem;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-cell-content,
    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-col {
        display: block;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile > tbody > tr > .fi-ta-selection-cell {
        position: absolute;
        inset-inline-end: 1.25rem;
        top: 0;
    }

    .fi-ta-table.fi-ta-table-stacked-on-mobile .fi-ta-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 40rem) {
    .fi-main {
        padding-inline: 0.5rem;
    }

    .fi-main-ctn > .fi-page {
        padding: 0.5rem;
        border-radius: 0.75rem;
    }
}