/* FPL-001/REQ-003, row 23 — Tree/TreeNode's own supplier `::part()` overrides for
   `fluent-tree-item`. Plain, UNSCOPED CSS -- deliberately NOT a `.razor.css`
   file, so Blazor's CSS-isolation scope attribute is never involved. (The former
   `fluent-menu-item::part()` rule here is retired -- R10 closed, the node menu composes row 9's
   real `<Menu>`, plain scoped classes, not a supplier custom element's shadow parts.) See
   Frontend/Components/Ui/Tree/TreeNode.razor.css's own header comment for why: `::deep` needs a
   plain HTML ancestor carrying TreeNode's own scope attribute (Button/B1's lesson), but wrapping
   <FluentTreeItem> in that ancestor breaks the supplier's own recursive `slot="item"` nesting
   (measured live: every nested item's `data-indent` came back null the moment a wrapper existed).
   Safe as genuinely global selectors because Tree/TreeNode are the ONLY code in the app that ever
   renders these tags (DEC-015 §2's supplier boundary, enforced structurally rather than by Blazor's
   own per-file scoping here).

   Loaded via a <link> in index.html, positioned before supplier-fluent.css (which must stay the
   LAST link in the head per its own contract). Not scanned by DesignLayerLint's
   LITERAL_VALUE_IN_LAYER_CSS (that check's scope, UI-LAYER.md §6, is `.razor.css` files plus the
   three named ones) -- held to the same var(--token)-only discipline by hand regardless. */

fluent-tree-item::part(positioning-region) {
    height: var(--rail-item-h) !important;
    border-radius: var(--radius);
    font-size: var(--fs-body);
    color: var(--text);
}

fluent-tree-item::part(positioning-region):hover {
    background: var(--fill-1);
}

/* Indent override (measured gap): the supplier's own default is 12px/level via `padding-left`,
   keyed off its own `data-indent` attribute -- the sheet wants 20px(--tree-indent)/level. Reuses
   the supplier's OWN attribute rather than tracking cascading depth ourselves. Covers depth 1-8,
   deeper than any realistic org chart in this product. */
fluent-tree-item[data-indent="1"]::part(positioning-region) { padding-left: var(--tree-indent); }
fluent-tree-item[data-indent="2"]::part(positioning-region) { padding-left: calc(var(--tree-indent) * 2); }
fluent-tree-item[data-indent="3"]::part(positioning-region) { padding-left: calc(var(--tree-indent) * 3); }
fluent-tree-item[data-indent="4"]::part(positioning-region) { padding-left: calc(var(--tree-indent) * 4); }
fluent-tree-item[data-indent="5"]::part(positioning-region) { padding-left: calc(var(--tree-indent) * 5); }
fluent-tree-item[data-indent="6"]::part(positioning-region) { padding-left: calc(var(--tree-indent) * 6); }
fluent-tree-item[data-indent="7"]::part(positioning-region) { padding-left: calc(var(--tree-indent) * 7); }
fluent-tree-item[data-indent="8"]::part(positioning-region) { padding-left: calc(var(--tree-indent) * 8); }

/* Selected override (measured gap): the supplier's own default is a generic grey fill with no
   edge -- keyed off the supplier's OWN `[selected]` attribute, which it sets itself on a real
   click (confirmed live: a real mouse click at 90% of a row's width set it). */
fluent-tree-item[selected]::part(positioning-region) {
    background: var(--accent-soft);
    box-shadow: inset var(--tree-sel-w) 0 0 var(--accent);
}

/* Refused (no supplier concept -- pure addition). Uses box-shadow, not outline, for the error edge (item 49's
   negative baseline found this rule's own permanent `outline` being read by the focus-ring audit as if it were
   the layer's ring, since a computed outline can't distinguish ":focus-visible" from "always on" -- the same
   border/outline separation TextInput's own invalid state already keeps, border-color for state, outline
   reserved for focus, kept here as box-shadow since ::part() positioning-region has no exposed border). */
.ui-tree-node-refused::part(positioning-region) {
    background: var(--error-bg);
    box-shadow: inset 0 0 0 var(--border-w) var(--error);
}

/* A node can be BOTH [selected] (the supplier sets this itself on a real click -- TreeNode.razor's own header
   comment) AND refused at once -- clicking a refused node is the normal way a user discovers the refusal in the
   first place. `box-shadow` does not layer across two separate rules the way two different properties would: the
   MORE SPECIFIC one (an attribute selector beats a class selector, so [selected] alone would win) replaces the
   other's value wholesale, not merges it -- found in whole-branch review, 2026-09-26, the moment refused's own
   rule above stopped using `outline` and started competing with [selected]'s `box-shadow` for the same property.
   A combined selector, more specific than either alone, draws both edges together (box-shadow accepts a
   comma-separated list of layered shadows in one declaration). */
fluent-tree-item[selected].ui-tree-node-refused::part(positioning-region) {
    background: var(--error-bg);
    box-shadow: inset var(--tree-sel-w) 0 0 var(--accent), inset 0 0 0 var(--border-w) var(--error);
}

/* FPL-001/REQ-018 (item 49) FR-2: 3 items drew no ring at all. The sheet's own tree specimen (05-data-display.html
   §36) names a selected-node edge and a refused-node error line, but no keyboard-focus drawing of its own -- FR-2's
   own fallback for that case ("the outset ring if the sheet draws none") applies, not the STOP (the sheet is
   silent, not ambiguous). `fluent-tree-item` is the focused host; the ring is drawn on its exposed part. */
fluent-tree-item:focus-visible::part(positioning-region) {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}