/* =============================================================
   A2W sidebar restyle — DO11961
   --------------------------------------------------------------
   Scoped under .xaf-sidebar. Reference model: DevExpress Fluent
   NavigationStyle = "Tree" (XAF Blazor). Values derive from the
   Fluent design-system tokens (--dxds-color-*) so accent presets
   and Light/Dark switch propagate automatically.

   Real DOM facts (DevExpress 25.2.x), Tree mode:
   - root:        .xaf-navmenu.xaf-tree-view.dxbl-treeview
   - items UL:    .dxbl-treeview-items-container  (rendered only when open)
   - item LI:     .dxbl-treeview-item (.has-children on expandable, .dxbl-active when selected)
   - row wrap:    .dxbl-treeview-item-content (flex: indent + toggle + container;
                  DevExpress already sets position:relative here)
   - indent:      .dxbl-treeview-item-indent     (native, 16px per depth level)
   - toggle:      .dxbl-btn-tool                 (caret button; .dxbl-invisible on leaves)
   - label link:  .dxbl-treeview-item-container  (the A with icon + label)
   - filter:      .dxbl-navigation-filter.dxbl-text-edit (outside the tree UL)
   ============================================================= */

.xaf-sidebar {
    /* ---------- Row density ----------
       Minimum row height. The content row grows beyond this when the label
       wraps to 2 lines (e.g. "[Salad] digital signage adattivo"). */
    --a2w-sidebar-row-h: 26px;

    /* ---------- Caret ↔ label gap ----------
       The two knobs that drive the visible gap between the expand caret
       and the label icon/text. Total visible gap ≈ sum of the two.
       Halve/double these to tighten/loosen the gap uniformly. */
    --a2w-sidebar-toggle-padding: 2px;        /* padding inside the toggle button */
    --a2w-sidebar-label-padding-left: 6px;    /* padding-left of the label container */
    --a2w-sidebar-label-padding-right: 10px;  /* padding-right of the label container */
    --a2w-sidebar-label-padding-y: 2px;       /* top/bottom padding of the label container */

    /* ---------- Accent palette ----------
       Accent follows the Fluent preset/custom color picked in SettingsComponent.
       accent-weak is derived dynamically for the selected-row background. */
    --a2w-sidebar-accent: var(--dxds-color-surface-primary-default-rest);
    --a2w-sidebar-accent-weak: color-mix(in srgb, var(--a2w-sidebar-accent) 12%, transparent);
    --a2w-sidebar-accent-bar-w: 3px;          /* left bar width on selected rows */

    /* ---------- Neutral palette ---------- */
    --a2w-sidebar-fg: var(--dxds-color-content-neutral-default-rest);
    /* muted fg derived from default fg via alpha so it follows dark/light */
    --a2w-sidebar-fg-muted: color-mix(in srgb, var(--a2w-sidebar-fg) 55%, transparent);
    --a2w-sidebar-border: var(--dxds-color-border-neutral-default-rest);
    /* Tree connector colour — accent-tinted so the branch guide reads as part of
       the brand family and follows the accent preset + Light/Dark automatically. */
    --a2w-sidebar-tree-line: color-mix(in srgb, var(--a2w-sidebar-accent) 45%, transparent);
    --a2w-sidebar-tree-line-w: 1.5px;         /* rail + tick thickness */
    --a2w-sidebar-tree-tick-w: 13px;          /* horizontal tick length toward the caption */

    /* ---------- Tree connector geometry ----------
       X position (from the row's left edge) of the vertical rail and of the start of
       the horizontal tick, per nesting depth.
       - depth1 (children of a top-level group): rail just left of the child icons.
       - depth2 (children of a nested group): rail aligned under the parent group's
         caret tip, so a nested subtree visibly hangs from its parent's expander. */
    --a2w-sidebar-treeline-x-depth1: 14px;
    --a2w-sidebar-treeline-x-depth2: 32px;
    /* The row icon/caret sits ~1px above the geometric row centre; nudge the tick and
       the elbow corner up by this so they sit ON the caret, not slightly below it. */
    --a2w-sidebar-tree-vcenter: 1px;
    /* Fallback height of the L stub on the last child — used only when that child is
       itself an expanded group (see the :has() rule below); leaf last children use 50%
       so the elbow adapts to a wrapped 2-line row. Header centre = half a row − vcenter. */
    --a2w-sidebar-tree-elbow-h: 13px;

    /* ---------- Branch band ----------
       Very light accent wash over an expanded group (its header row + all descendants).
       Kept intentionally faint so the selected row (accent-weak, 12%) stays dominant. */
    --a2w-sidebar-branch-band: color-mix(in srgb, var(--a2w-sidebar-accent) 3%, transparent);

    /* Extra right extension of the rows so the selected-row highlight and the band line
       up with the right edge of the Filter combobox above the tree (the tree reserves
       8px more right padding than the filter). */
    --a2w-sidebar-row-right-extend: 8px;

    /* ---------- Metabox + filter ----------
       Metabox uses a light accent tint (10%) so it reads as part of
       the brand family while staying slightly more present than the
       app wrapper (8% in a2w-app.css). Filter uses the standard
       accent-weak (12%) so the search box still reads as an
       interactive affordance. */
    --a2w-metabox-bg: color-mix(in srgb, var(--a2w-sidebar-accent) 10%, transparent);
    --a2w-sidebar-filter-bg: var(--a2w-sidebar-accent-weak);
}

/* =============================================================
   Size mode overrides — Compact (xaf-size-s)
   --------------------------------------------------------------
   DevExpress applies a class on <body> to drive size modes:
     xaf-size-s = Compact, xaf-size-m = Standard (default), xaf-size-l = Large.
   In Compact, DX shrinks the native indent step (16 → 12 px) and the
   caret toggle button (25.6 → 21.33 px). We re-declare only the tokens
   that depend on those geometries so row height and tree-line stay
   coherent with the rest of the Compact UI. Other modes keep the
   defaults at :root.
   ============================================================= */
body.xaf-size-s .xaf-sidebar {
    --a2w-sidebar-row-h: 22px;
    --a2w-sidebar-label-padding-left: 5px;
    --a2w-sidebar-label-padding-right: 8px;
    --a2w-sidebar-label-padding-y: 1px;
    /* Horizontal tree geometry (indent, caret, captions) is identical to Standard in
       this DevExpress build — only the row height shrinks — so the rail x values are
       inherited unchanged. Only the L-stub fallback follows the shorter compact header
       (half the 24px row − vcenter). */
    --a2w-sidebar-tree-elbow-h: 11px;
}

/* =============================================================
   Row density — label container
   --------------------------------------------------------------
   DevExpress ships a rule at specificity (0,0,4,0):
     .dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container
   We match the same chain under .xaf-sidebar to win on specificity.
   min-height only (never height) so long labels wrap to 2 lines.
   ============================================================= */
.xaf-sidebar .dxbl-treeview .dxbl-treeview-item
    > .dxbl-treeview-item-content > .dxbl-treeview-item-container {
    min-height: var(--a2w-sidebar-row-h);
    padding:
        var(--a2w-sidebar-label-padding-y)
        var(--a2w-sidebar-label-padding-right)
        var(--a2w-sidebar-label-padding-y)
        var(--a2w-sidebar-label-padding-left);
    line-height: 1.3;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* Grow to fill remaining space after indent + toggle so the selected-row
       background spans edge-to-edge across the LI width. */
    flex: 1 1 auto;
    min-width: 0;
}

/* Visible toggle button (expandable nodes) — shrink its internal padding
   so the caret sits close to the label. */
.xaf-sidebar .dxbl-treeview .dxbl-treeview-item
    > .dxbl-treeview-item-content > .dxbl-btn-tool:not(.dxbl-invisible) {
    padding: var(--a2w-sidebar-toggle-padding);
}

/* Hidden toggle (leaves) — collapse to 0 so it doesn't reserve space. */
.xaf-sidebar .dxbl-treeview .dxbl-treeview-item
    > .dxbl-treeview-item-content > .dxbl-btn-tool.dxbl-invisible {
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    flex: 0 0 0;
}

/* =============================================================
   Kill legacy underline on sub-items (from XAF navigation.css)
   ============================================================= */
.xaf-sidebar .clickable-xaf-nav-item > a .xaf-nav-link,
.xaf-sidebar .clickable-xaf-nav-item > div > a .xaf-nav-link {
    text-decoration: none;
    font-weight: 400;
}

/* =============================================================
   Selected row — full-width accent-weak bg + 3px accent bar
   --------------------------------------------------------------
   Painted on .dxbl-treeview-item-content (the flex row wrapping
   indent + toggle + container). It's the only element that spans
   the full sidebar width AND excludes the nested children subtree.
   DevExpress already sets position:relative on item-content, so no
   override is needed here; its own .dxbl-active fill on the A
   container is cleared to avoid double-fill.
   ============================================================= */
.xaf-sidebar .dxbl-treeview-item.dxbl-active > .dxbl-treeview-item-content {
    background-color: var(--a2w-sidebar-accent-weak);
}

.xaf-sidebar .dxbl-treeview-item.dxbl-active > .dxbl-treeview-item-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: var(--a2w-sidebar-accent-bar-w);
    background: var(--a2w-sidebar-accent);
    border-radius: 0 2px 2px 0;
    pointer-events: none;
    z-index: 1;
}

/* Clear DevExpress's native selected fill on the A container and promote
   the label + link to accent color, bold on the text. */
.xaf-sidebar .dxbl-treeview-item-container.dxbl-active {
    background-color: transparent !important;
    color: var(--a2w-sidebar-accent) !important;
}

.xaf-sidebar .dxbl-treeview-item-container.dxbl-active .xaf-nav-link {
    font-weight: 600;
}

/* Icons keep their original multicolor appearance — out of scope. */

/* =============================================================
   Tree connectors — per-child segments with an L (elbow) at the last child
   --------------------------------------------------------------
   Replaces the old single container-spanning guide line. The rail is drawn as
   one vertical segment per DIRECT child of an open node, so:
     - non-last children get a full row-box-height segment: consecutive segments
       stack into a continuous line AND bridge the subtree of an expanded
       non-last child (the LI box includes its own children container);
     - the last child gets a half-height stub that stops at the row centre where
       the tick meets it, forming an L (└). Because the stub is capped at the
       header height, when the last child is itself an expanded group the parent
       rail ends at that group's header and never runs down alongside the group's
       own children — no double line.
   DevExpress only emits .dxbl-treeview-items-container as a descendant of a tree
   item when that item is open, so scoping on ".dxbl-treeview-item ...-container"
   targets only expanded branches (never the root UL / top-level items).
   Covers the two typical depths of XAF nav (L0→L1, L1→L2).
   ============================================================= */
.xaf-sidebar .dxbl-treeview-item .dxbl-treeview-items-container > .dxbl-treeview-item {
    position: relative;
}

/* Vertical rail segment on each direct child of an open node. */
.xaf-sidebar .dxbl-treeview-item .dxbl-treeview-items-container
    > .dxbl-treeview-item::before {
    content: "";
    position: absolute;
    left: var(--a2w-sidebar-treeline-x-depth1);
    top: 0;
    bottom: 0;
    width: var(--a2w-sidebar-tree-line-w);
    background: var(--a2w-sidebar-tree-line);
    pointer-events: none;
    z-index: 2;
}

/* Depth 2 — children of a nested group: shift one indent step further right. */
.xaf-sidebar .dxbl-treeview-item .dxbl-treeview-item .dxbl-treeview-items-container
    > .dxbl-treeview-item::before {
    left: var(--a2w-sidebar-treeline-x-depth2);
}

/* Last direct child: cap the rail at the row centre so it closes as an L (└).
   height:50% adapts to a last row that wraps to two lines (the tick sits at 50%). */
.xaf-sidebar .dxbl-treeview-item .dxbl-treeview-items-container
    > .dxbl-treeview-item:last-child::before {
    bottom: auto;
    height: calc(50% - var(--a2w-sidebar-tree-vcenter));
}

/* ...unless the last child is itself an expanded group: its LI box also contains the
   group's own children subtree, so 50% would overshoot far below the header — cap the
   stub at the header centre with the fixed elbow height instead. */
.xaf-sidebar .dxbl-treeview-item .dxbl-treeview-items-container
    > .dxbl-treeview-item:last-child:has(> .dxbl-expandable-container > .dxbl-treeview-items-container)::before {
    height: var(--a2w-sidebar-tree-elbow-h);
}

/* Horizontal tick from the rail to each row, same length at every depth, stopping
   short of the caption. Painted on the row content so it centres on the header even
   when the label wraps to two lines. Same left as the rail so the two meet cleanly. */
.xaf-sidebar .dxbl-treeview-item .dxbl-treeview-items-container
    > .dxbl-treeview-item > .dxbl-treeview-item-content::after {
    content: "";
    position: absolute;
    top: 50%;
    /* Self-centre the tick on the 50% line, then lift it by vcenter onto the caret. */
    transform: translateY(calc(-50% - var(--a2w-sidebar-tree-vcenter)));
    left: var(--a2w-sidebar-treeline-x-depth1);
    width: var(--a2w-sidebar-tree-tick-w);
    height: var(--a2w-sidebar-tree-line-w);
    background: var(--a2w-sidebar-tree-line);
    pointer-events: none;
    z-index: 2;
}
.xaf-sidebar .dxbl-treeview-item .dxbl-treeview-item .dxbl-treeview-items-container
    > .dxbl-treeview-item > .dxbl-treeview-item-content::after {
    left: var(--a2w-sidebar-treeline-x-depth2);
}

/* =============================================================
   Branch band — very light accent wash over an expanded group
   --------------------------------------------------------------
   Painted per row on the SAME element as the selected-row highlight
   (.dxbl-treeview-item-content) so it has the exact same width, and exactly once
   per row so the tint never deepens with nesting depth. Two selectors: the
   descendants of an open group, plus the open group's own header row so that
   expanding e.g. "Asset" also washes the "Asset" row itself. :has() matches only
   groups whose children container is currently rendered (i.e. expanded), so a
   collapsed group shows no band.
   ============================================================= */
.xaf-sidebar .dxbl-treeview-item .dxbl-treeview-items-container
    .dxbl-treeview-item:not(.dxbl-active) > .dxbl-treeview-item-content {
    background-color: var(--a2w-sidebar-branch-band);
}

.xaf-sidebar .dxbl-treeview-item:has(> .dxbl-expandable-container > .dxbl-treeview-items-container):not(.dxbl-active)
    > .dxbl-treeview-item-content {
    background-color: var(--a2w-sidebar-branch-band);
}

/* =============================================================
   Row width — align the highlight + band to the Filter combobox
   --------------------------------------------------------------
   The tree reserves more right padding than the filter above it, leaving the row
   box ~8px short of the filter's right edge. Pull the row content back so the
   selected-row highlight and the branch band end exactly at the filter's edge.
   ============================================================= */
.xaf-sidebar .dxbl-treeview-item > .dxbl-treeview-item-content {
    margin-right: calc(-1 * var(--a2w-sidebar-row-right-extend));
}

/* =============================================================
   Filter input — bordered search box with subtle grey bg
   ============================================================= */
.xaf-sidebar .dxbl-navigation-filter.dxbl-text-edit {
    width: 100%;
    border: 1px solid var(--a2w-sidebar-border);
    border-radius: 4px;
    background-color: var(--a2w-sidebar-filter-bg);
    padding: 0;
    min-height: 28px;
}

.xaf-sidebar .dxbl-navigation-filter .dxbl-text-edit-input {
    padding: 4px 8px;
    font-size: 12.5px;
    background-color: transparent;
    /* rule 4: accent text on accent-weak bg */
    color: var(--a2w-sidebar-accent);
}

.xaf-sidebar .dxbl-navigation-filter .dxbl-text-edit-input::placeholder {
    color: var(--a2w-sidebar-accent);
    opacity: 0.6;
}

/* =============================================================
   Metabox (bottom-left info box)
   Server side: SMMSv2Module.GetAboutInfoString() emits
     <div class="a2w-meta-title"><svg…>…</svg><span>…</span></div>
     <dl class="a2w-meta-list"><dt>…</dt><dd>…</dd>…</dl>
   All styling (size, stroke, fill of the inline SVG included) lives
   here — the server code stays free of presentation concerns.
   ============================================================= */
.xaf-sidebar .about-info {
    margin: 0;
    padding: 8px 10px;
    border-top: 1px solid var(--a2w-sidebar-border);
    background: var(--a2w-metabox-bg);
    font-size: 11px;
    line-height: 1.45;
    color: var(--a2w-sidebar-fg-muted);
}

.xaf-sidebar .about-info .a2w-meta-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--a2w-sidebar-fg);
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 2px;
}

.xaf-sidebar .about-info .a2w-meta-title svg {
    color: var(--a2w-sidebar-accent);
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xaf-sidebar .about-info .a2w-meta-list {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    row-gap: 1px;
}

.xaf-sidebar .about-info .a2w-meta-list dt {
    color: var(--a2w-sidebar-fg-muted);
    margin: 0;
    font-weight: 600;
}

.xaf-sidebar .about-info .a2w-meta-list dd {
    margin: 0;
    color: var(--a2w-sidebar-fg);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}