/* Execution-chain tree (Audit Log ParentExecutionId feature, Task 10).
   Clean, corporate, internal-tool aesthetic — consistent with the Audit Log
   grid / drilldown drawer. Bootstrap CSS variables drive every colour so the
   tree tracks the active theme. No component framework, no JS for layout. */

.execution-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nested lists indent and carry a vertical guide rule that ties children to
   their parent — the classic file-tree connector, kept subtle. */
.execution-tree--root {
    padding-left: 0;
}

.execution-tree .execution-tree {
    margin-left: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid var(--bs-border-color);
}

.execution-tree-item {
    position: relative;
}

/* The node card: a flex row of [toggle][body]. */
.execution-tree-node {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    margin: 0.25rem 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-body-bg);
}

/* The execution the user drilled in from — a left accent rule + tinted
   background so it stands out without shouting. */
.execution-tree-node--current {
    border-color: var(--bs-primary-border-subtle);
    background-color: var(--bs-primary-bg-subtle);
    box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

/* Stub node — an execution with no audited actions. Muted + dashed border so
   it reads as a placeholder rather than a real audited execution. */
.execution-tree-node--stub {
    border-style: dashed;
    background-color: var(--bs-tertiary-bg);
}

/* Expand / collapse control. A small square that mirrors the table-light
   header tone used elsewhere on the Audit pages. */
.execution-tree-toggle {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    line-height: 1;
    cursor: pointer;
}

.execution-tree-toggle:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.execution-tree-toggle--leaf {
    border-color: transparent;
    background-color: transparent;
    cursor: default;
}

.execution-tree-toggle-glyph {
    font-size: 0.875rem;
    font-weight: 600;
}

.execution-tree-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Headline row: short id link, tags, row count. */
.execution-tree-headline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.execution-tree-link {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.execution-tree-link:hover {
    text-decoration: underline;
}

.execution-tree-tag {
    font-weight: 500;
    font-size: 0.6875rem;
}

.execution-tree-rowcount {
    margin-left: auto;
}

/* Meta row: source / channels / statuses / time span, pipe-separated visually
   via spacing rather than literal separators. */
.execution-tree-meta {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    color: var(--bs-body-color);
}

.execution-tree-meta-item .text-muted {
    margin-right: 0.25rem;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
}