/* ============================================================
   NavTree (sidebar DxTreeList) global style overrides.
   Registered via DxResourceManager.RegisterTheme +
   AddFilePaths, so the rules sit on the Fluent theme layer and
   do NOT go through Blazor's CSS isolation. This is the path
   officially recommended by DevExpress for appearance
   customization:
     https://docs.devexpress.com/Blazor/401740/styling-and-themes/css-classes

   We target the explicit `center-nav-tree` CssClass assigned
   on the DxTreeList component - no ::deep, no scoped hash.
   ============================================================ */

/* No borders, no grid stripes, no box-shadow dividers. Belt +
   braces for all three ways the Fluent theme could paint a
   row-separator or cell-divider line. */
.center-nav-tree,
.center-nav-tree * {
    border: 0 !important;
    border-color: transparent !important;
    border-style: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
}

/* Row + cell backgrounds: inherit the sidebar colour so any
   Fluent alternate-row stripe is painted over with the panel
   fill. We also zero out public --dxds-* and internal
   --dxbl-grid-* variables that feed row background / divider
   colour, because any descendant reading them through `var(...)`
   should end up transparent. */
.center-nav-tree {
    --dxds-color-surface-neutral-subdued-rest: transparent;
    --dxds-color-surface-neutral-subdued-alt: transparent;
    --dxbl-grid-border-color: transparent;
    --dxbl-grid-table-border-color: transparent;
    --dxbl-grid-row-border-color: transparent;
    --dxbl-grid-cell-border-color: transparent;
    --dxbl-grid-alt-row-bg: transparent;
    --dxbl-grid-focused-row-bg: transparent;
    --dxbl-grid-focused-row-color: inherit;
    --dxbl-grid-row-hover-bg: rgba(0, 0, 0, 0.035);
    --dxbl-grid-header-bg: transparent;
    /* Fluent paints focused-row glyphs with --dxbl-grid-focus-color
       (#fffffe) against the brand-red wash. We keep the wash off, so
       that near-white chevron vanished on the #F3F3F3 sidebar. Pin
       the focus glyph to the same dark color as idle rows (PDM/BDE
       trees use the same tokens). */
    --dxbl-grid-focus-bg: transparent;
    --dxbl-grid-focus-color: #4b5563;
    --dxbl-grid-selection-focus-dark-bg: transparent;
    --dxbl-grid-selection-focus-dark-color: #4b5563;
    /* SizeMode.Small paints the expand chevron as a DxButton with
       padding + a matching negative margin. That shrinks the parent
       slot below the leaf placeholder and misaligns icons on the same
       level. Zero the internal padding vars (same pattern as PDM/BDE
       trees) so the 20px slot rule below can win. */
    --dxbl-grid-expand-btn-padding-y: 0;
    --dxbl-grid-expand-btn-padding-x: 0;
    --gnt-nav-tree-expand-slot: 20px;
    --gnt-nav-tree-indent: 12px;
    --gnt-nav-tree-row-height: 22px;
}

/* Match the sidebar fill (#F3F3F3) on every container the Fluent
   theme might paint white, so the tree visually dissolves into the
   sidebar instead of forming a distinct "card". */
.center-nav-tree,
.center-nav-tree .dxbl-grid,
.center-nav-tree .dxbl-grid-table,
.center-nav-tree .dxbl-treelist,
.center-nav-tree .dxbl-grid-row,
.center-nav-tree .dxbl-grid-row > *,
.center-nav-tree .dxbl-grid-cell,
.center-nav-tree tr,
.center-nav-tree td,
.center-nav-tree th,
.center-nav-tree tbody,
.center-nav-tree thead,
.center-nav-tree table {
    background: #F3F3F3 !important;
    background-color: #F3F3F3 !important;
    background-image: none !important;
}

/* Stretch the TreeList + its internal grid/table to fill the sidebar
   horizontally. By default DevExpress sizes the inner <table> to the
   intrinsic content width, which leaves an unused "dead" strip on
   the right of a narrow data column. We force 100% width on the
   container, the grid, the table, and the data column cells so the
   row itself (cursor, hover background) extends all the way to the
   splitter. */
.center-nav-tree .dxbl-grid,
.center-nav-tree .dxbl-grid-table,
.center-nav-tree .dxbl-treelist,
.center-nav-tree table,
.center-nav-tree .dxbl-grid-row {
    width: 100% !important;
    max-width: 100% !important;
}

/* The label column is the only visible data column and must fill the
   remaining width once the zero-width drag-anchor column is sized.

   Use table-layout:fixed (NOT auto): with `auto` the table grows to its
   intrinsic content width whenever a deeply nested branch with long
   labels is expanded (e.g. "Artikel" -> "Schmierstoffe / Reinigungs- u.
   Bindemittel e.t.c."). That intrinsic width (~307px) exceeds the sidebar
   and, combined with the negative-margin flush-chevron hack, drags the
   whole tree ~27px to the left on expand. `fixed` caps the table at 100%
   of the sidebar; the label column still fills the width, and long
   labels truncate via the ellipsis rules below instead of widening the
   table. min-width:0 lets the flex row/label actually shrink to allow
   that truncation. */
.center-nav-tree table {
    table-layout: fixed !important;
    width: 100% !important;
}

.center-nav-tree .dxbl-grid-cell:not(.center-nav-drag-anchor),
.center-nav-tree .dxbl-treelist-cell:not(.center-nav-drag-anchor) {
    width: auto !important;
    min-width: 0 !important;
}

/* Allow the flex nav row and its label to shrink below their content
   size so the ellipsis can kick in under table-layout:fixed. */
.center-nav-tree .center-nav-row {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.center-nav-tree .center-nav-row__label,
.center-nav-tree .center-nav-row__link {
    min-width: 0 !important;
}

/* Pseudo-elements sometimes draw 1 px divider lines. */
.center-nav-tree *::before,
.center-nav-tree *::after {
    box-shadow: none !important;
    background-image: none !important;
}

/* Drag handle collapsed to zero visual space. We keep width/
   padding at 0 rather than display:none: the DevExpress drag-
   engine expects the cell to remain in the table layout, and
   some Fluent themes cascade a display:table-cell further down
   which negates our display:none. */
.center-nav-tree .center-nav-drag-anchor {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.center-nav-tree .center-nav-drag-anchor * {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Tighten horizontal spacing: DxTreeList Fluent default reserves
   quite some space via (a) table-level padding, (b) the zero-
   width drag-anchor <col> still takes a few px, and (c) the
   first-cell padding-left of ~12 px. We shift the whole TreeList
   left by 18 px and compensate with matching padding on the
   container so the Sidebar itself stays the same width. The
   effect is: the chevron ends up flush against the left edge.
   The negative left margin must be compensated on the right side
   too, otherwise the table ends 18 px before the sidebar's
   content edge and leaves a dead strip. We grow the effective
   width with calc() (18 px for the shift + 4 px for the sidebar's
   padding-right) so the row fills the full sidebar width. */
.center-nav-tree,
.center-nav-tree .dxbl-grid,
.center-nav-tree .dxbl-treelist {
    margin-left: -18px !important;
    margin-right: -4px !important;
    width: calc(100% + 22px) !important;
    max-width: calc(100% + 22px) !important;
}


/* Per-level indent. Fluent 26.1 emits one `.dxbl-grid-tree-node-indent`
   per depth (default 20px each), not a single cumulative inline width
   like 25.2 — so a fixed width here tightens the stride without
   flattening the hierarchy. 12px matches the NavMenu density target
   and the ResourceList left-pane tree. */
.center-nav-tree .dxbl-grid-tree-node-indent {
    box-sizing: border-box !important;
    width: var(--gnt-nav-tree-indent, 12px) !important;
    min-width: var(--gnt-nav-tree-indent, 12px) !important;
    max-width: var(--gnt-nav-tree-indent, 12px) !important;
    flex: 0 0 var(--gnt-nav-tree-indent, 12px) !important;
}

/* Keep indents, chevron and label on one line. The cell display
   template (.center-nav-row) is a flex sibling of the expand
   button inside this container - width:100% on the row forces a
   wrap and drops the chevron below the label. */
.center-nav-tree .dxbl-grid-tree-node-expand-controls-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
}

/* Verified DOM (Fluent 26.1, inspected live):
     td.dxbl-grid-tree-node-expand-controls-cell
       div.dxbl-grid-tree-node-expand-controls-container   <- flex, wraps EVERYTHING
         div.dxbl-grid-tree-node-indents-container
           div.dxbl-grid-tree-node-empty-indent
           div.dxbl-grid-tree-node-indent  (x level, 20px each)
         button.dxbl-btn.dxbl-sm.dxbl-grid-tree-node-expand-button.dxbl-btn-tool
           (parent: SizeMode.Small -> padding 1.75px + margin -1.75px, layout ~14px)
         OR div.dxbl-grid-tree-node-expand-button-placeholder (leaf, 20px)

   CRITICAL: the controls-CONTAINER wraps the per-level indent cells
   too, so it must NEVER get a fixed width - doing so squashes the
   indentation and flattens the whole hierarchy. Size ONLY the expand
   slot. A two-class selector loses to Fluent `.dxbl-btn.dxbl-sm` (four
   classes + !important padding/margin), so parent icons sit ~6px left
   of same-level leaves. Match the button's full class list and pin
   both slots to the same 20px border-box. The Fluent rule that
   shrinks the button is three classes deep
   (`.dxbl-grid-tree-node-expand-controls-cell
     .dxbl-grid-tree-node-expand-controls-container
     .dxbl-grid-tree-node-expand-button`); we add `.center-nav-tree`
   so we win without fighting every DxButton size class. */
.center-nav-tree .dxbl-grid-tree-node-expand-controls-cell .dxbl-grid-tree-node-expand-controls-container .dxbl-grid-tree-node-expand-button,
.center-nav-tree .dxbl-btn.dxbl-btn-link.dxbl-sm.dxbl-grid-tree-node-expand-button.dxbl-btn-tool,
.center-nav-tree .dxbl-grid-tree-node-expand-button,
.center-nav-tree .dxbl-grid-tree-node-expand-button-placeholder {
    box-sizing: border-box !important;
    width: var(--gnt-nav-tree-expand-slot, 20px) !important;
    min-width: var(--gnt-nav-tree-expand-slot, 20px) !important;
    max-width: var(--gnt-nav-tree-expand-slot, 20px) !important;
    height: var(--gnt-nav-tree-expand-slot, 20px) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 var(--gnt-nav-tree-expand-slot, 20px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Focused/selected rows: Fluent still tints the chevron SVG via
   currentColor even after the focus wash is removed. Keep the
   glyph readable on the sidebar fill (same pattern as PDM/BDE). */
.center-nav-tree tr.dxbl-grid-focused-row .dxbl-grid-tree-node-expand-button,
.center-nav-tree tr.dxbl-grid-selected-row .dxbl-grid-tree-node-expand-button,
.center-nav-tree tr.dxbl-grid-focused-row .dxbl-grid-tree-node-expand-button .dxbl-image,
.center-nav-tree tr.dxbl-grid-selected-row .dxbl-grid-tree-node-expand-button .dxbl-image {
    color: #4b5563 !important;
    fill: currentColor !important;
    opacity: 1 !important;
}

/* Compact, uniform row height. NavMenu density target is ~22 px
   (16 px icon + 12 px type); SizeMode.Small still leaves Fluent
   rows taller, so we pin the stride explicitly. */
.center-nav-tree .dxbl-grid-row,
.center-nav-tree .dxbl-treelist-row,
.center-nav-tree tr {
    height: var(--gnt-nav-tree-row-height, 22px) !important;
    min-height: var(--gnt-nav-tree-row-height, 22px) !important;
}

.center-nav-tree .dxbl-grid-cell,
.center-nav-tree .dxbl-treelist-cell,
.center-nav-tree td {
    height: var(--gnt-nav-tree-row-height, 22px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
}

/* Header row hidden + no fallback separator line. */
.center-nav-tree .dxbl-grid-header,
.center-nav-tree .dxbl-grid-header-row,
.center-nav-tree thead {
    display: none !important;
}