html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 28px;
    height: 24px;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* ---------- Grid column readability ----------------------------------------
 * DxGrid renders its table with the equivalent of `table-layout: fixed`,
 * which gives every column an equal share of the available width and clips
 * cell content with '…'. For list-views with many columns this means short
 * values like 'On' waste space while long titles get cut off.
 *
 * Override on three axes:
 *   1) `table-layout: auto` lets the browser size each column to fit its
 *      widest cell — a real per-column auto-width. May overflow the grid
 *      container; combined with `overflow-x: auto` on the wrapper that
 *      yields a horizontal scrollbar when there is more content than space,
 *      preferable over invisible truncation.
 *   2) `white-space: nowrap` on data cells keeps each value on a single
 *      line so auto-width actually measures the full text length (with
 *      wrap, the browser would still pick a narrow column and break lines).
 *   3) `width: max-content` on the inner `.dxbl-text` ensures the cell
 *      content's intrinsic width drives the column, not a parent flex
 *      container.
 */
.dxbl-grid .dxbl-grid-table,
.dxbl-treelist .dxbl-treelist-table {
    table-layout: auto !important;
    width: auto !important;
    min-width: 100%;
}
.dxbl-grid .dxbl-grid-table .dxbl-grid-header > th,
.dxbl-grid .dxbl-grid-table .dxbl-grid-data-row > td,
.dxbl-treelist .dxbl-treelist-table .dxbl-treelist-header > th,
.dxbl-treelist .dxbl-treelist-table .dxbl-treelist-data-row > td {
    white-space: nowrap !important;
    overflow: visible;
    text-overflow: clip;
    width: auto !important;
}
.dxbl-grid .dxbl-grid-table .dxbl-grid-data-row > td > .dxbl-text,
.dxbl-treelist .dxbl-treelist-table .dxbl-treelist-data-row > td > .dxbl-text {
    width: max-content;
    max-width: none;
}
/* Make sure the wrapper that owns the scrollbar is wide enough to allow
 * horizontal scrolling when columns add up beyond the viewport. */
.dxbl-grid .dxbl-scroll-viewer,
.dxbl-treelist .dxbl-scroll-viewer {
    overflow-x: auto;
}