/* SalesOrderLineForm's structure-line picker panel (Client/Pages/SalesOrder/SalesOrderLineForm.razor).
   Applied via Box's Class parameter, so it must live in a plain stylesheet, not a *.razor.css file —
   CSS isolation only scopes elements rendered directly by the .razor file that owns the stylesheet,
   and Box renders its own root div under Box.razor's own scope, not the caller's. */
/* app.css's shared ".offcanvas-body" rule only sets max-height (90vh), not height — and a
   max-height-only parent gives no definite basis for a child's height:100% to resolve against
   (it's ignored, computed as auto). Rather than guess a fixed vh number here (which would ignore
   the real, variable height of the offcanvas-header above it), give height:100% back to just this
   drawer instance (Class="structure-picker-drawer" in SalesOrderLineForm.razor) instead of the
   shared max-height, so it's always exactly the true remaining space regardless of header size. */
.structure-picker-drawer.offcanvas .offcanvas-body {
    height: 100%;
}

/* Fills the drawer's offcanvas-body and turns it into a column: the HelpButton keeps its natural
   height, and structure-picker-row takes the rest. min-height:0 is required so the row is allowed
   to shrink below its content's natural height — without it, flex items default to min-height:auto
   and just grow the drawer instead of scrolling internally. */
.structure-picker-drawer-body {
    height: 100%;
    min-height: 0;
}

.structure-picker-row {
    flex: 1 1 auto;
    min-height: 0;
}

.structure-picker-panel {
    width: 50rem;
    max-width: 50%;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    margin-right: 1rem;
}

/* The form side scrolls independently of the structure list, within the same bounded row height. */
.structure-picker-form {
    height: 100%;
    overflow-y: auto;
}

/* Image preview on the line form's Files tab (SalesOrderLineImagePanel) — applied via GroupImage's
   Class parameter, same cross-component-scoping reason as above. */
.line-image-preview {
    max-width: 240px;
    max-height: 240px;
    object-fit: contain;
}