/* Floating help bubble (bottom-right) — triggers the same navbar "?" entry
   point (clientDefs.app.shepherd.intro), never a second code path. See
   client/custom/src/extensions/views/site/navbar.js. */
.workflow-help-bubble {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1030;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: #7c4dc4;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(35, 15, 60, .35);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.workflow-help-bubble:hover {
    background: #6b3fae;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(35, 15, 60, .4);
}

.workflow-help-bubble:focus-visible {
    outline: 3px solid #c9a8f0;
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .workflow-help-bubble {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }
}

/* Airy tour popovers — generous inner padding and real spacing between
   heading / diagram / body, everywhere a Shepherd step renders. */
.shepherd-espocrm.shepherd-element {
    max-width: 520px;
}

.shepherd-espocrm .shepherd-content .shepherd-header {
    padding: 1.25rem 1.5rem .75rem;
}

.shepherd-espocrm .shepherd-text {
    padding: .5rem 1.5rem 1.5rem;
    line-height: 1.6;
}

.shepherd-espocrm .shepherd-footer {
    padding: 0 1.5rem 1.25rem;
}

.shepherd-mm-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shepherd-mm-specifics {
    margin: 0;
}

/* Chain-position strip: where this screen sits among the canonical process
   blocks (R1 sales / R2 supply / R3 people / X cross-cutting). */
.shepherd-mm-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .8125rem;
}

.shepherd-mm-chain-label {
    color: var(--text-muted-color, #888);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-right: .25rem;
}

.shepherd-mm-chain-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
}

.shepherd-mm-chain-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: #f1e9fb;
    color: #5a3489;
    font-weight: 600;
}

.shepherd-mm-chain-badge-current {
    background: #7c4dc4;
    color: #fff;
}

.shepherd-mm-chain-arrow {
    color: var(--text-muted-color, #aaa);
}

/* Pre-rendered diagram (static SVG, no runtime renderer — see
   scripts/shepherd-diagrams/). Scrolls inside its own box instead of forcing
   the popover wider/taller than the branching or chain length needs — the
   image is scaled to fit both bounds at once (intrinsic ratio kept, no
   cropping), so the whole diagram reads in one look without scrolling. */
.shepherd-mm-diagram {
    text-align: center;
    background: var(--panel-bg, #fafafa);
    border-radius: 6px;
    padding: .75rem;
}

.shepherd-mm-diagram img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 380px;
}