/*
 * The page header as Filament 5.8.2 lays it out (filamentphp/filament pull request #20491, "prevent page header
 * content from being squeezed by actions"), for the installed 5.8.1. The heading and its explanation keep their own
 * width, and the header's buttons move onto the next line when both do not fit side by side, instead of squeezing the
 * explanation into a narrow column.
 *
 * Plain CSS on Filament's hook classes, outside its cascade layers, so these rules win over the ones they replace.
 * Once filament/filament is 5.8.2 or later, delete this file and its registration in AppServiceProvider:
 * tests/Feature/Filament/PageHeaderLayoutTest.php fails to say so.
 */

.fi-header > div:first-child:not(.fi-header-actions-ctn) {
    max-width: 100%;
}

.fi-header-actions-ctn {
    max-width: 100%;
}

@media (min-width: 40rem) {
    .fi-header {
        flex-wrap: wrap;
    }

    .fi-header > div:first-child:not(.fi-header-actions-ctn) {
        width: max-content;
    }

    .fi-header-actions-ctn {
        align-self: flex-end;
    }

    .fi-header:has(.fi-header-subheading) .fi-header-actions-ctn {
        align-self: center;
    }

    .fi-header.fi-header-has-breadcrumbs .fi-header-actions-ctn {
        margin-top: 0;
    }
}