/* ---------------------------------------------------------------------------
   Fluent UI v5: restore the v4 look of shared building blocks.
   Twin of ESBlazorApp/wwwroot/css/es-fluent-v5-look.css - change both. (A csproj Link to that
   file served an empty stylesheet: linked static assets resolve under this app's wwwroot.)
   --------------------------------------------------------------------------- */
/* A Width on a Fluent input lands on its <fluent-field> wrapper: make the control fill it. */
fluent-field[style*="width"] > [slot="input"]:not(fluent-dropdown){width:100%;min-width:0}

/* Except dropdowns (FluentSelect / FluentCombobox): Fluent 2 gives the control a fixed 160px
   minimum inside its shadow DOM, which no outer style can shrink. A narrower Width only made the
   host smaller and the control overflowed onto its neighbours, so never go below that. */
fluent-dropdown,
fluent-field:has(> fluent-dropdown){min-width:160px}

/* Accordion items as bordered panels (v4 default) instead of v5's bare rows. */
fluent-accordion-item{
    border:1px solid var(--colorNeutralStroke2);
    border-radius:var(--borderRadiusMedium);
    background:var(--colorNeutralBackground1);
    margin-bottom:8px;
}
fluent-accordion-item[expanded]::part(heading){border-bottom:1px solid var(--colorNeutralStroke2)}
fluent-accordion-item::part(content){padding-block:8px 12px}

/* Data grid: v5 cells inherit the page's 16px text with no vertical padding, so two-line cells
   (name + code) crush together. Back to v4's 14px body text with breathing room per row, and one
   header style whether or not the column is sortable (sortable titles sit inside a button). */
.fluent-data-grid{font-size:var(--fontSizeBase300);line-height:var(--lineHeightBase300)}
.fluent-data-grid td{padding-block:6px}
.fluent-data-grid th [col-title-text]{font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold)}

/* v5 tab strips never wrap: on a phone, tab headers with badges pushed the whole page wider than
   the screen. Let them wrap onto a second line instead. */
fluent-tablist{flex-wrap:wrap}

/* Blazor's validation classes (valid/modified/invalid) land on the <fluent-field> wrapper, so
   app.css's outline boxed the label as well as the input. Outline the control only. */
fluent-field.valid.modified:not([type=checkbox]),
fluent-field.invalid{outline:none}
fluent-field.valid.modified > [slot="input"]:not(fluent-checkbox){outline:1px solid #26b050}
fluent-field.invalid > [slot="input"]{outline:1px solid #e50000}

/* FluentSelect renders an empty <fluent-text slot="message"> under the dropdown: ~2px more dead
   space than other inputs, which sat bottom-aligned neighbours (Save/clear buttons) lower than
   the dropdown. Hide it while it is empty; a real validation message is not :empty, so it shows. */
fluent-field > [slot="message"]:empty{display:none}

/* Section toggle inside an accordion item (e.g. "More filter(s)" in a Search section): a nested
   FluentAccordion can't be used there - v5 items flip on "click", so a nested item's click
   bubbles to the outer item and is flipped straight back. A FluentButton with
   Class="es-section-toggle" instead, drawn as a full-width header bar: icon and label on the
   left, chevron (IconEnd) at the far right, like the accordion headers around it. */
fluent-button.es-section-toggle{display:flex;width:100%;justify-content:flex-start;margin-top:8px}
fluent-button.es-section-toggle::part(content){flex:1;text-align:start}