/* Flow task thread (vertical timeline running through every status dot) - used by
   FlowInstanceTaskNestedListItem.razor and FlowInstanceDetails.razor.

   This can't be Blazor-isolated component CSS (a FlowInstanceTaskNestedListItem.razor.css file): the main
   chain of tasks renders as flat DOM siblings directly under FlowInstanceDetails.razor's plain wrapper div
   (so that the thread line runs straight down instead of drifting right with every nested task - see the
   comment above the recursive call in FlowInstanceTaskNestedListItem.razor). Blazor's CSS isolation scopes
   a rule to elements that are descendants of something *this* component rendered; ::deep still requires such
   an ancestor to exist. Since the main chain's tasks are top-level siblings with no such ancestor, an
   isolated stylesheet silently stops applying to the whole main chain. A plain global stylesheet has no
   such restriction, so this lives here instead. */

/* A flat list of sibling .thread-item rows - each row draws its own rail segment (see .thread-rail below),
   so the line is continuous and self-contained regardless of how deep the recursive component nesting goes. */
.thread-list {
    display: flex;
    flex-direction: column;
}

.thread-item {
    display: flex;
    align-items: stretch;
}

.thread-rail {
    position: relative;
    flex: 0 0 2.1rem;
    display: flex;
    justify-content: center;
}

/* The line itself. Every item's rail spans its own full height by default, so stacked one after another
   they form one continuous line; only the first/last item in a list trims its half so the line starts and
   ends exactly at a dot instead of floating above/below the chain. */
.thread-rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dde1e6;
    transform: translateX(-50%);
}

.thread-list > .thread-item:first-child > .thread-rail::before {
    top: calc(1.2rem + 9px);
}

.thread-list > .thread-item:last-child > .thread-rail::before {
    bottom: calc(100% - 1.2rem - 9px);
}

.thread-dot {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1.2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    background: #adb5bd;
    box-shadow: 0 0 0 3px #fff;
}

.thread-dot.is-success { background: #28a745; }
.thread-dot.is-danger { background: #dc3545; }
.thread-dot.is-pending { background: #adb5bd; }

.thread-dot.is-toggle {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-top: calc(1.2rem - 1px);
    font-size: 10px;
}

.thread-dot.is-toggle:hover {
    filter: brightness(1.12);
}

.thread-dot.is-toggle:focus-visible {
    outline: 2px solid #2f6fed;
    outline-offset: 2px;
}

.thread-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: .95rem .25rem 1.15rem .85rem;
    border-bottom: 1px solid #edeff1;
}

.thread-list > .thread-item:last-child > .thread-content {
    border-bottom: none;
}

.thread-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .3rem;
}

.thread-state {
    background: #eef0f3;
    color: #343a40;
    padding: .12rem .45rem;
    border-radius: 4px;
    font-size: .82rem;
    font-weight: 600;
}

.thread-id {
    margin-left: auto;
    color: #98a1ae;
    font-size: .72rem;
    white-space: nowrap;
}

.thread-desc {
    margin: 0 0 .5rem;
}

.thread-meta {
    display: flex;
    gap: 1rem;
    color: #98a1ae;
    font-size: .76rem;
    margin-bottom: .55rem;
}

.thread-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem 1rem;
}

.thread-action {
    color: #2f6fed;
    text-decoration: none;
    font-size: .82rem;
}

.thread-action:hover {
    text-decoration: underline;
}

.thread-action.is-danger {
    color: #dc3545;
}

.thread-muted {
    color: #98a1ae;
    font-size: .82rem;
}

.thread-more-group {
    align-self: center;
}

.thread-actions-inline {
    align-self: center;
}

.thread-more {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 5px;
    border: 1px solid #dde1e6;
    background: #fff;
    color: #6c757d;
}

.thread-more:hover,
.thread-more:focus {
    background: #f1f3f5;
}

/* A branch off the main thread: one child-flow instance spawned by a task (subflow/iterator/mutator).
   Given its own accent color (Bootstrap's "purple") so it reads as a distinct fork, not another task. */
.thread-branches {
    margin-top: .85rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.thread-branch {
    border: 1px solid #e4ddff;
    border-left: 3px solid #6f42c1;
    border-radius: 8px;
    background: #faf9ff;
    padding: .75rem .9rem .35rem;
}

.thread-branch-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: #6f42c1;
    font-weight: 600;
    margin-bottom: .3rem;
}

.thread-branch-status {
    font-weight: 400;
    color: #6c757d;
    background: #fff;
    border: 1px solid #e4ddff;
    border-radius: 4px;
    padding: .05rem .4rem;
    font-size: .72rem;
}

.thread-branch .thread-list {
    margin-top: .2rem;
}

.thread-branch .thread-rail::before {
    background: #e4ddff;
}

.thread-branch .thread-content {
    border-bottom-color: #ece7fb;
}

/* Rare case: a status fans out to several next tasks in parallel instead of one straight line. */
.thread-fanout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .5rem;
}

.thread-fanout-branch {
    flex: 1 1 260px;
    border: 1px dashed #dde1e6;
    border-radius: 6px;
    padding: .5rem;
}