/* ==========================================================================
   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;
    }

/* [style theme 2026-11-04] selected navigation panel bar item in the theme color (--bg-main) instead of the Kendo office365 blue */
.k-panelbar > .k-item > .k-link.k-state-selected,
.k-panelbar > li.k-state-default > .k-link.k-state-selected,
.k-panelbar > li > .k-state-selected {
    background-color: var(--bg-main, var(--bm-bg, #0072C6));
    border-color: var(--bg-main, var(--bm-bg, #0072C6));
    color: white;
}

.k-panelbar > .k-item > .k-link.k-state-selected.k-state-hover,
.k-panelbar > li > .k-state-selected.k-state-hover,
.k-panelbar > .k-item > .k-link.k-state-selected:hover {
    background-color: var(--bg-selected, var(--bg-main, var(--bm-bg, #005A9E)));
}


/* =====================================================================================
   SOV forms (BoomBinder.js) - moved from bmField_ensureStyle() on 2026-11-10
   Field templates (Root.cshtml bmField_*), group titles, edit / display mode, lazy tabs.
   Colors: theme variables with fallback (see BoomWeb_Styling_Themes); --bm-class-color is set by the view.
   ===================================================================================== */

/* --- field templates [2026-11-08] --- */
.bm-field { margin-bottom: 6px; }
.bm-field-row { display: flex; align-items: center; gap: 4px; }
.bm-field-row > .bm-field-input,
.bm-field-row > .k-widget:not(.k-switch) { flex: 1 1 auto; min-width: 0; width: auto; }
.bm-field-row > .k-switch { flex: 0 0 auto; }   /* width as inline style (data-width), .form-group .k-widget sets 100% */

/* bm-field-box: one border around input + buttons, buttons without background, icons in the theme color */
.bm-field-row > .bm-field-box { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; border: 1px solid rgba(0,0,0,.18); border-radius: 2px; background: #fff; height: 34px; box-sizing: border-box; }
.bm-field-box:focus-within { border-color: var(--bg-main, var(--bm-bg, #00008B)); }
.bm-field-box > .bm-field-input { flex: 1 1 auto; min-width: 0; width: auto !important; height: 100% !important; border: none !important; box-shadow: none !important; background: transparent; }

/* global button styles set a height of ~48px -> reset */
.bm-field-btn { flex: 0 0 auto; border: none; background: transparent; padding: 0 6px; margin: 0; cursor: pointer; color: var(--bg-main, var(--bm-bg, #00008B)); height: auto !important; min-height: 0 !important; line-height: 1 !important; }
.bm-field-btn:hover { background: rgba(0,0,0,.06); }
.bm-field-btn .k-icon { color: inherit; }
.bm-field-error { color: #c00; cursor: help; }
.bm-help-icon { color: var(--bg-main, var(--bm-bg, #00008B)); cursor: help; margin-right: 3px; font-size: 1em; vertical-align: -1px; text-transform: none; }

/* --- group titles [2026-11-09]: smaller, class color, left edge = left edge of the controls --- */
.bm-sov-form h4.sov_Group { font-size: 1em; font-weight: 700; line-height: 1.3; color: var(--bm-class-color, var(--bg-main, var(--bm-bg, #00008B))); padding-left: 15px; margin-bottom: 6px; }
.bm-sov-form .col > h4.sov_Group { padding-left: 0; }   /* inside a column the column padding already aligns it */

/* --- compact rows [2026-11-10] (a global rule sets .row margin-bottom 16px; selectors kept more specific) --- */
.bm-sov-form .row,
.bm-sov-form .form-group .row { margin-bottom: 6px; }
.bm-sov-form .bm-field { margin-bottom: 4px; }

/* --- companion checkbox on the label line [2026-11-10] (data-bm-companion-mode="label") --- */
.bm-field-labelline { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bm-field-companion { cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.bm-field-companion > input { margin: 0; cursor: pointer; }
/* [2026-11-11] choices on the label line (data-bm-choices), e.g. e-mail: E-Mail | hat keine | will keine */
.bm-field-choices.k-button-group { flex: 0 0 auto; margin: 0; }
.bm-field-choices.k-button-group .k-button { padding: 1px 8px; font-size: 0.85em; line-height: 1.4; height: auto; min-height: 0; }
.bm-field-choices.k-button-group .k-button.k-state-active, .bm-field-choices.k-button-group .k-button.k-selected { background-color: var(--bm-class-color, var(--bg-main, var(--bm-bg, #00008B))); border-color: var(--bm-class-color, var(--bg-main, var(--bm-bg, #00008B))); color: #fff; }
.bm-field[data-bm-choice-locked="1"] .bm-field-input { color: #777; font-style: italic; }
/* disabled group (read mode): still hoverable for the tooltips, not clickable (BoomBinder ignores the click) */
.bm-field-choices.k-state-disabled, .bm-field-choices.k-state-disabled .k-button { pointer-events: auto; cursor: default; }

/* --- display mode [2026-11-10]: locked form (.bm-readonly, edit mode off)
       no box, value as text with a fine line, no picker / spinner icons, larger values;
       action buttons (call, mail, copy) stay active, placeholders stay visible --- */
.bm-readonly .bm-field-row > .bm-field-box,
.bm-readonly .bm-field-row > .k-textbox,
.bm-readonly .bm-field-row > textarea,
.bm-readonly .bm-field-row .k-picker-wrap,
.bm-readonly .bm-field-row .k-dropdown-wrap,
.bm-readonly .bm-field-row .k-numeric-wrap { border-color: transparent !important; border-bottom-color: rgba(0,0,0,.12) !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.bm-readonly .bm-field-row .k-select { display: none !important; }
.bm-readonly .bm-field-row input:not([type=checkbox]),
.bm-readonly .bm-field-row textarea,
.bm-readonly .bm-field-row .k-input { padding-left: 0 !important; cursor: default; font-size: 1.1em !important; }
.bm-readonly .bm-field-row textarea { resize: none; }
.bm-readonly .bm-field-row .k-switch { cursor: default; }

/* --- edit mode, field that stays locked [2026-11-10] (markup read-only, data-bm-readonly): read-only look --- */
.bm-editmode .bm-field-locked .bm-field-row > .bm-field-box,
.bm-editmode .bm-field-locked .bm-field-row > .k-textbox,
.bm-editmode .bm-field-locked .bm-field-row > textarea,
.bm-editmode .bm-field-locked .k-picker-wrap,
.bm-editmode .bm-field-locked .k-dropdown-wrap,
.bm-editmode .bm-field-locked .k-numeric-wrap { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.10) !important; box-shadow: none !important; }
.bm-editmode .bm-field-locked input,
.bm-editmode .bm-field-locked textarea { cursor: default; }
.bm-editmode .bm-field-locked .k-select { display: none !important; }

/* --- lazy loaded sub view in a tab [2026-11-09] (boomBindLazySubviewTab) --- */
.bm-lazy-tab { position: relative; min-height: 240px; }
.bm-lazy-tab-loading { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--bm-class-color, var(--bg-main, var(--bm-bg, #00008B))); font-weight: 600; }
.bm-lazy-tab-loading .k-loading-image { position: static; width: 24px; height: 24px; background-size: 24px; }

/* --- search mode label v1/v2 in free text search fields [2026-11-10] (bi.decorateSearchFields in BoomUI.js):
       discreet, in the background at the right end of the field, typed text may run over it; click on it switches --- */
.bm-searchmode-label { position: absolute; z-index: 1; pointer-events: none; padding: 0 4px; line-height: 14px; font-size: 10px; font-weight: 600; letter-spacing: .5px; border-radius: 7px; color: rgba(0,0,0,.28); border: 1px solid rgba(0,0,0,.12); background: transparent; user-select: none; transition: color .15s, border-color .15s, background .15s; }
.bm-searchmode-label.bm-searchmode-v2 { color: var(--bm-theme, var(--bg-main, #00008B)); border-color: var(--bm-theme, var(--bg-main, #00008B)); opacity: .55; }
.bm-searchmode-label.bm-searchmode-hover { color: #fff; background: var(--bm-theme, var(--bg-main, #00008B)); border-color: transparent; opacity: 1; }

/* --- SOV header [2026-11-10] (moved from Customer.html, entity-header*): info left, action buttons right;
       name / key fields in the class color, links in the theme color --- */
.k-i-dial:before { content: "\e8b5"; }   /* phone icon (field template bmField_PhoneNumber, context menu) */
.bm-sov-header { display: flex; gap: 32px; margin-bottom: 12px; align-items: flex-start; }
.bm-sov-header-info { flex: 1; min-width: 0; }
.bm-sov-header-name { font-size: 1.4em; font-weight: bold; color: var(--bm-class-color, var(--bg-main, var(--bm-bg, #00008B))); cursor: url(/Style/Themes/Common/Boom/cursor/copyText.svg) 15 15, auto; }
.bm-sov-header-name-row { display: flex; gap: 5px; align-items: baseline; }
.bm-sov-header-field { font-size: 1.05em; margin: 3px 0; display: block; }
.bm-sov-header-field a { color: var(--bg-main, var(--bm-bg, #00008B)); text-decoration: none; }
.bm-sov-header-field a:hover { text-decoration: underline; }
.bm-sov-header-actions { flex: 0 0 200px; display: flex; flex-direction: column; gap: 6px; }
.bm-sov-header-actions .k-button { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; height: auto; min-height: 32px; padding: 6px 10px; }
.bm-sov-portrait { width: 140px; }
.bm-sov-portrait img { width: 140px; height: 140px; object-fit: cover; object-position: top; background-color: #cccccc; display: block; }