/* ==========================================================================
   boomLayout.css – central layout contract for BoomWeb views
   --------------------------------------------------------------------------
   A view marks the element that takes the remaining height of its container
   with the class "bm-fill". The container then stacks its children vertically
   (flex column): all other children keep their natural height, the fill
   element(s) share the remaining space. No JavaScript measuring.

   - several bm-fill siblings share the remaining space
   - in a container WITHOUT a definite height (e.g. a view loaded as subview into an auto height
     container) bm-fill elements keep their natural height (flex-basis auto) instead of collapsing
   - bm-fill-2 / bm-fill-3 give a sibling a larger share
   - chains: a bm-fill element with a bm-fill child is a container again
     (window content > splitter > pane > form-group > row > col ...)
   - bm-full: the element takes 100% of its parent's height (use it inside a
     bm-fill element whose display is toggled by kendo, e.g. a panel bar content)
   - the outermost container must have a definite height
     (.k-window-content, #centerPane, .k-pane are sized by kendo)
   - kendo tabstrip with bm-fill: the active tab fills the tabstrip and scrolls inside
   - kendo grid directly inside a bm-fill element (e.g. a subview container): the grid takes
     the height left by the toolbars / search above it
   - NEVER put bm-fill on an element kendo turns into a splitter pane (direct child
     of a splitter): kendo sizes panes itself. Put it on the pane's content instead.
   - containers hidden by an inline display:none stay hidden (no !important on display)

   Selectors use ".bm-fill.bm-fill.bm-fill" only to raise the specificity above kendo
   and bootstrap rules (e.g. display:block on panel bar items) without !important.

   Loaded last in Root.cshtml and Page.cshtml (after the inline style blocks).
   Version 8 – 24.10.2026
   ========================================================================== */

/* container: any element with a direct bm-fill child stacks its children vertically.
   kendo tab contents are excluded: kendo hides inactive tabs by class (not inline), this rule would
   show them again -> the active tab is handled by the tabstrip rule further below */
body :has(> .bm-fill.bm-fill.bm-fill):not(.k-tabstrip > .k-content) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

    /* non-fill children keep their natural height */
    body :has(> .bm-fill.bm-fill.bm-fill) > :not(.bm-fill) {
        flex: 0 0 auto;
    }

/* fill element: takes the remaining height. flex-basis auto: in a container without a definite
   height the element keeps its natural height (basis 0 would collapse it to 0).
   height auto: kendo defaults such as .k-splitter { height: 300px } must not interfere */
.bm-fill {
    flex: 1 1 auto !important;
    min-height: 0;
    height: auto !important;
}

/* a kendo splitter has no natural height (its panes are positioned absolutely):
   keep kendo's former default height as minimum */
.k-splitter.bm-fill {
    min-height: 300px;
}

.bm-fill-2 { flex-grow: 2 !important; }
.bm-fill-3 { flex-grow: 3 !important; }

/* element that takes the full height of its (definite) parent */
.bm-full {
    height: 100%;
}

iframe.bm-full {
    display: block; /* inline iframes add a line gap below */
}

/* collapsed panel bar item: only its header, no remaining height */
.k-panelbar > .bm-fill[aria-expanded="false"] {
    flex: 0 0 auto !important;
}

/* kendo widgets that replace the marked element (the editor table replaces its textarea)
   take the full height of their bm-fill parent */
.bm-fill > .k-editor {
    height: 100% !important;
}

/* kendo tabstrip marked bm-fill: tab headers keep their height, the active tab takes the rest
   and scrolls inside (inactive tabs stay hidden by kendo's inline display:none) */
.k-tabstrip.bm-fill.bm-fill {
    display: flex;
    flex-direction: column;
    min-height: 300px; /* never squeezed to nothing by large siblings below it */
}

    .k-tabstrip.bm-fill > .k-tabstrip-items,
    .k-tabstrip.bm-fill > .k-tabstrip-items-wrapper {
        flex: 0 0 auto;
    }

    .k-tabstrip.bm-fill > .k-content {
        flex: 1 1 auto !important;
        min-height: 0;
        overflow: auto;
    }

/* the active tab is a container when it holds bm-fill elements; kendo sets an inline display:block
   on the active tab, so !important is needed here (only the active tab, hidden ones stay hidden) */
.k-tabstrip > .k-content.k-state-active:has(> .bm-fill),
.k-tabstrip > .k-content.k-active:has(> .bm-fill) {
    display: flex !important;
    flex-direction: column;
}

/* kendo grid directly inside a bm-fill element (subview container, e.g. boomObjects.cshtml loaded by
   loadSubview): toolbars, search etc. keep their height, the grid takes the rest.
   kendo recalculates the grid content height on kendo.resize (window resize, tab activation).
   The subview never gets smaller than its toolbars + the grid minimum (min-height: auto = content based);
   the scrolling container around it (e.g. the active tab) scrolls instead of overlapping.
   contain: size -> the grid contributes only its min-height to that minimum, not all of its rows */
.bm-fill:has(> .k-grid) {
    display: flex;
    flex-direction: column;
    min-height: auto;
}

    .bm-fill:has(> .k-grid) > :not(.k-grid) {
        flex: 0 0 auto;
    }

    .bm-fill > .k-grid {
        flex: 1 1 0;
        min-height: var(--bm-grid-min, 300px); /* kendo pager, toolbar, header + a few rows; a view can set
                                                  style="--bm-grid-min: 400px" on the subview container */
        contain: size;
    }