/* IVR call flow diagram (templates/views/ivrs/index.php, IvrCallFlowService) */

.ivr-flow-wrap {
    overflow-x: auto;
    padding-bottom: 8px;
}

.ivr-flow,
.ivr-flow ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ivr-flow ul {
    margin-left: 18px;
    padding-left: 18px;
}

.ivr-flow li {
    position: relative;
    padding: 6px 0;
}

/* Vertical line of the parent: full height, the last child stops at its connector. */
.ivr-flow ul > li::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--border-color);
}

.ivr-flow ul > li:last-child::before {
    bottom: auto;
    height: 23px;
}

/* Horizontal connector to the item. */
.ivr-flow ul > li::after {
    content: "";
    position: absolute;
    left: -18px;
    top: 22px;
    width: 14px;
    border-top: 2px solid var(--border-color);
}

.ivr-flow-edge {
    display: inline-block;
    min-width: 92px;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    vertical-align: top;
    margin-top: 6px;
}

.ivr-flow-node {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    font-size: 12px;
    max-width: 520px;
    vertical-align: top;
}

.ivr-flow-ivr {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary) inset;
}

.ivr-flow-ivr.is-inactive {
    opacity: 0.6;
}

.ivr-flow-title {
    font-weight: 700;
    color: var(--primary);
    font-size: 13px;
}

.ivr-flow-meta {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 2px;
}

.ivr-flow-leaf .badge {
    font-size: 10px;
}

@media (max-width: 600px) {
    .ivr-flow ul {
        margin-left: 8px;
        padding-left: 12px;
    }
    .ivr-flow ul > li::before { left: -12px; }
    .ivr-flow ul > li::after { left: -12px; width: 9px; }
    .ivr-flow-edge { min-width: 0; display: block; margin: 0 0 4px 0; width: fit-content; }
}