/* ─────────────────────────────────────────────────────────────────────────
   HierarchicalSelect — accordion tree dropdown (Components/HierarchicalSelect.razor).

   Ported from the React reference's `crf-divcost-*` picker
   (devtrac-ui/src/components/shared/ContractRequestForm.css → AccordionDivCostSelect),
   renamed `hsel-*` so the component isn't coupled to one form's stylesheet.
   The odd decimal px values (10.5 / 6.4 / 2.4 / 3.2 …) are React's 0.8x-scaled
   sizes — preserve them exactly for parity.

   React env theming maps onto the Blazor project theme tokens:
     --brand-bg    → --projectrac-primary-color
     --brand-hover → --projectrac-secondary-color
   ───────────────────────────────────────────────────────────────────────── */

.hsel-wrap {
    position: relative;
    width: 100%;
}

/* ---- Closed trigger ---------------------------------------------------- */
.hsel-trigger {
    width: 100%;
    height: 24px;
    border: 1px solid #d9d9d9;
    border-radius: 2.4px;
    background: #ffffff;
    cursor: text;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.hsel-trigger:hover {
    border-color: #b5b5b5;
}

.hsel-trigger:focus-within {
    border-color: var(--projectrac-primary-color, #4a90d9);
    box-shadow: 0 0 0 1.6px color-mix(in srgb, var(--projectrac-primary-color, #4a90d9) 18%, transparent);
}

/* "Next to fill" — the cascade's tinted outline, project primary color. Mirrors
   .ff-fill-next in flyout-form.css / .crf-input-active in React. */
.hsel-trigger.is-active-field {
    border-color: var(--projectrac-primary-color, #4a90d9);
    box-shadow: 0 0 0 1.6px color-mix(in srgb, var(--projectrac-primary-color, #4a90d9) 18%, transparent);
}

/* Disabled but HOLDING a value = Locked (solid greyed). A disabled + empty
   field renders .hsel-awaiting instead (dashed), never this. */
.hsel-trigger.is-disabled {
    background: #f5f5f5;
    cursor: not-allowed;
}

.hsel-trigger.is-disabled .hsel-input,
.hsel-trigger.is-disabled .hsel-chevron {
    cursor: not-allowed;
}

.hsel-trigger.is-disabled .hsel-input {
    color: #555;
}

.hsel-trigger.is-disabled .hsel-chevron {
    color: #999;
}

.hsel-input {
    flex: 1;
    height: 100%;
    padding: 0 17.6px 0 6.4px;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    color: #333;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hsel-input::placeholder {
    color: #b0b0b0;
}

/* Top-panel (non-grid) fields carry the panel field typography — 10.5px, same as
   .crf-input / the .ff-* form fields — rather than the in-table default of 10px,
   so a value does not change size when the field swaps to its locked view. */
.flyout-form-doc .ff-info-table .hsel-input,
.hsel-wrap.hsel-lg .hsel-input {
    font-size: 10.5px;
}

.hsel-chevron {
    position: absolute;
    right: 6.4px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    cursor: pointer;
}

/* ---- Awaiting a prerequisite (disabled + empty) ------------------------ */
/* Appearance #3 of the field standard: dashed border, faint fill, italic hint —
   the tell that separates it from Locked (solid, holds a value). */
.hsel-awaiting {
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 500;
    font-style: italic;
    color: #adadad;
    padding: 0 6.4px;
    height: 24px;
    width: 100%;
    border: 1px dashed #cfcfcf;
    border-radius: 2.4px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    gap: 6.4px;
    box-sizing: border-box;
    cursor: not-allowed;
}

.hsel-awaiting-hint {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hsel-awaiting-lock {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    color: #bcbcbc;
}

/* ---- Popup panel ------------------------------------------------------- */
/* Position + width are written by hierarchical-select.js. `position: fixed` from
   the first paint so the panel never enters normal flow (which would briefly
   extend the page and shift the trigger before the first measure). The scrollbar
   rail is always present (overflow-y: scroll) so layout does not jump when
   content crosses the max-height. NO min-width — the JS probes the rendered width
   to derive the ancestor zoom/scale. */
.hsel-panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    max-height: 256px;
    overflow-y: scroll;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-top: none;
    border-radius: 0 0 2.4px 2.4px;
    box-shadow: 0 3.2px 9.6px rgba(0, 0, 0, 0.12);
    padding: 0;
    box-sizing: border-box;
    visibility: hidden;   /* JS reveals it once positioned — no first-paint flash */
}

/* Flipped above the trigger (no room below) — hairline and radius swap ends. */
.hsel-panel.hsel-panel-above {
    border-top: 1px solid #d9d9d9;
    border-bottom: none;
    border-radius: 2.4px 2.4px 0 0;
    box-shadow: 0 -3.2px 9.6px rgba(0, 0, 0, 0.12);
}

/* Slim 6px scrollbar — must equal `_gutter` in hierarchical-select.js, which
   widens the panel by exactly that much so rows right-align with the trigger. */
.hsel-panel::-webkit-scrollbar {
    width: 6px;
}

.hsel-panel::-webkit-scrollbar-track {
    background: transparent;
}

.hsel-panel::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 3px;
}

.hsel-panel::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.hsel-empty {
    padding: 9.6px;
    color: #888;
    font-size: 10px;
    font-style: italic;
    text-align: center;
}

/* ---- Rows -------------------------------------------------------------- */
/* Every visible node renders as one row button, in nav order. Three-step
   hierarchy of grays so the levels read apart: L1 group #d5d5d5 → deeper
   branches #ededed → selectable leaves white. */
.hsel-row {
    display: flex;
    align-items: center;
    /* One space at 10px Inter (~2.6px) between the code and the name. */
    gap: 2.6px;
    width: 100%;
    background: #ffffff;
    border: none;
    border-bottom: 1px solid #ececec;
    /* 6.4px left padding matches the trigger input, so the code column in the
       panel lines up with the code shown in the closed field. */
    padding: 6.4px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
}

.hsel-row:last-child {
    border-bottom: none;
}

/* Top-level group header — the darkest step, matching the panel header bar. */
.hsel-branch.hsel-depth-0 {
    background: #d5d5d5;
    border-bottom: 1px solid #c5c5c5;
    font-weight: 600;
    color: #222;
    justify-content: space-between;
}

/* A group boundary gets the heavier hairline above it (React's
   .crf-divcost-section border), except at the very top of the panel. */
.hsel-row + .hsel-branch.hsel-depth-0 {
    border-top: 1px solid #d9d9d9;
}

/* L1 headers are expand toggles, never selectable — so the keyboard cursor is
   just a slight focus tint, not the selected-row highlight. */
.hsel-branch.hsel-depth-0:hover,
.hsel-branch.hsel-depth-0.is-active {
    background: #cbcbcb;
}

/* Deeper branches (a leaf-holding parent, e.g. a task with budget lines) — the
   middle step. Expand-only by default; only their children are selectable. */
.hsel-branch:not(.hsel-depth-0) {
    background: #ededed;
    font-weight: 600;
    justify-content: space-between;
}

.hsel-branch:not(.hsel-depth-0):hover,
.hsel-branch:not(.hsel-depth-0).is-active {
    background: #e4e4e4;
}

/* Leaves keep the white background so they read as the clickable rows against
   the gray branches above them. Children render flush — no indent — for the
   first three levels (React parity); deeper trees step in 8px per level so they
   stay legible. */
.hsel-leaf {
    background: #ffffff;
}

.hsel-row.hsel-depth-3 { padding-left: 14.4px; }
.hsel-row.hsel-depth-4 { padding-left: 22.4px; }
.hsel-row.hsel-depth-5 { padding-left: 30.4px; }

/* Keyboard cursor + hover — a neutral focus tint only. The project-colored
   highlight below is reserved for the committed row, so the cursor reads as
   transient focus while the selected row stays the anchor. */
.hsel-leaf:hover,
.hsel-leaf.is-active {
    background: #f5f5f0;
}

/* SELECTED (committed value) — secondary project tint + a solid left accent bar,
   persistent as the cursor moves over other rows. Uses the SECONDARY color:
   primary goes muddy on dark-branded projects. */
.hsel-row.is-selected {
    background: color-mix(in srgb, var(--projectrac-secondary-color, #4a90d9) 24%, white);
    box-shadow: inset 3px 0 0 var(--projectrac-secondary-color, #4a90d9);
}

/* ---- Row content ------------------------------------------------------- */
/* A group label's "##" + "-" must land on exactly the same pixels as the "##"
   and first "-" of the child codes below it ("20-" over "20-01-000"). Two things
   make that work: intrinsic (not fixed) widths, and weight 500 with tabular
   figures on the number/dash — glyph advance differs between 500 and 600, so a
   600-weight "20-" would be wider than the 500-weight "20-" beneath it. */
.hsel-header-label {
    display: flex;
    align-items: baseline;
    gap: 0;
    flex: 1;
    overflow: hidden;
}

.hsel-header-num,
.hsel-header-dash {
    flex-shrink: 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.hsel-header-name {
    /* NO left margin: the name starts immediately after "##-", exactly where the
       second ## of a child code begins. */
    flex: 1;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The code column is INTRINSIC, not a fixed box: the codes are all the same
   ##-##-### shape and render with tabular figures, so they column-align on their
   own, and the name sits one space after the code — matching how the value reads
   in the closed field. */
.hsel-code {
    flex-shrink: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Middle columns of a multi-column row. */
.hsel-col {
    flex: 0 1 auto;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hsel-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hsel-branch-chevron {
    color: #888;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.hsel-branch-chevron.is-expanded {
    transform: rotate(180deg);
}

/* Chevron hit area — its own element so a selectable branch can be picked by its
   row while the chevron still expands it. */
.hsel-chevron-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}