/* MUD "main page" content pattern (KB patterns/main-page) — shared spacing for the
   header / toolbar / actions / body composition every back-office page repeats. Global
   (unscoped) so all pages share one source of truth; page-specific structure (grids,
   tables, panels) stays in each page's own .razor.css. MUD tokens only.

   Usage in a page .razor:
     <header class="mud-page__head">
       <div><h1 class="text-heading-h1">Title</h1><p class="mud-page__intro">Subtitle</p></div>
       <MudButton .../>                         <!-- optional primary action, right-aligned -->
     </header>
     <div class="mud-page__toolbar"> ...filters/search... </div>
     <div class="mud-page__body"> ...table / form / content... </div>

   Form pages use .mud-page__actions for the button row instead of a header action. */

/* Header: title + subtitle on the left, optional primary action on the right. */
.mud-page__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-24);
}

/* Let the title/subtitle block shrink and ellipsize instead of shoving the action off-row. */
.mud-page__head > :first-child {
    min-width: 0;
}

/* Subtitle directly under the h1 — auto-styled so pages need no extra class on the <p>.
   flex-basis:100% keeps the subtitle on its own full-width row whether the page wraps
   the title+subtitle in a <div> (then this <p> isn't a flex item — inert) or drops the
   <h1>/<p> straight into the header (then this forces the <p> below the <h1> instead of
   letting space-between shove it onto the title row). Robust to both page structures. */
.mud-page__head p,
.mud-page__intro {
    flex-basis: 100%;
    margin-top: var(--spacing-8);
    margin-bottom: 0;
    color: var(--color-text-base-secondary);
}

/* Filter / search / sort row. */
.mud-page__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-24);
}

/* Leading label inside a toolbar (e.g. "Stare"). */
.mud-page__toolbar-label {
    color: var(--color-text-base-secondary);
    margin-right: var(--spacing-4);
}

/* Action-button cluster on form pages (Save / Back / …). */
.mud-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-12);
    margin-top: var(--spacing-8);
}

/* Vertically-stacked content body (form fields, or table + pagination). */
.mud-page__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
}

/* UI-SPEC §1.4 — `page-with-forms`: a simple admin form reads down one 720 px column rather than the whole content
   column (MW-559: the operator and licence forms ran 977 px wide at 1440). */
.mud-page__body--form {
    max-inline-size: 720px;
}

/* Portal-document editor form (MIS-081 legal documents, MIS-082 report templates). Global rather than
   per-page scoped CSS because BOTH editors render the same fieldset/field layout: Blazor CSS isolation is
   per-component, so a scoped copy per editor is the only alternative — and two copies of a layout drift.
   MUD tokens only (SemanticTokenLintTests). */
.document-facts,
.document-file {
    margin: 0 0 var(--spacing-24);
    padding: var(--spacing-16);
    border: 1px solid var(--color-border-base-subtle);
    border-radius: var(--border-radius-4);
}

.document-facts__row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-16);
    max-width: 24rem;
}

.document-field-label {
    color: var(--color-text-base-secondary);
}

.document-input,
.document-select {
    padding: var(--spacing-8);
    border: 1px solid var(--color-border-base-default);
    border-radius: var(--border-radius-4);
    font: inherit;
}

.document-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    padding: var(--spacing-16) 0;
}

.document-file p {
    margin: 0 0 var(--spacing-8);
}

/* MW-580 (FR24.10): the staged replacement, stacked label over value so it reads as a second fact beside the
   live file rather than as a continuation of it. */
.document-file__pending {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin: 0 0 var(--spacing-8);
}

.document-file__pending span:first-child {
    color: var(--color-text-base-secondary);
}