/* Filament's default page header puts the title and all header actions in
   one row (title div + .fi-header-actions-ctn as flex siblings). Pages with
   several actions (Job Postings, Screenings, Employee Contracts) squeezed
   the title into a few-characters-wide column as a result. Stacking the
   title above the actions - and letting the actions themselves wrap - fixes
   this for every resource page at once, without touching any page's
   individual action list or behavior. */
/* !important is required here: Filament's own app.css (which sets
   .fi-header{flex-direction:row}) loads after this stylesheet, so without
   it the vendor rule would win on source order at equal specificity.
   Filament's own CSS already has a tuned margin-top on
   .fi-header-actions-ctn for its own stacked/mobile state, so that spacing
   is left as-is rather than overridden here. */
.fi-header {
    flex-direction: column !important;
    align-items: stretch !important;
}

.fi-header-heading {
    white-space: normal;
    overflow-wrap: break-word;
}

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

.fi-header-actions-ctn .fi-ac {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}