/* /cum-functioneaza: incident flow diagram (templates/page/incident_flow.tpl, js/incident-flow.js).
   Loaded only by that page, not in the minify bundle. Colours of the steps: end of diagrams/incident-flow.mmd. */

.iflow {
    contain: inline-size; /* .page-wrapper is display: table, the chips must not set the page width */
    margin: 0 0 28px;
}

/* ---------- Stage buttons ---------- */

.iflow-phases {
    display: flex;
    gap: 8px;
    min-height: 58px; /* the buttons come with the diagram: their place is kept, so the page doesn't jump */
    padding: 2px 2px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.iflow-phases::-webkit-scrollbar {
    display: none;
}

.iflow-phase {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #e4e6eb;
    border-radius: 22px;
    background: #fff;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .2s, border-color .2s, color .2s;
}

.iflow-phase:focus-visible {
    border-color: #f4511e;
    color: #f4511e;
}

@media (hover: hover) {
    .iflow-phase:hover {
        border-color: #f4511e;
        color: #f4511e;
    }

    .iflow-phase.is-active:hover {
        color: #fff;
    }

    .iflow-controls button:hover {
        border-color: #f4511e;
        color: #f4511e;
    }
}

.iflow-phase.is-active {
    border-color: #f4511e;
    background: #f4511e;
    color: #fff;
}

/* ---------- Canvas ---------- */

.iflow-canvas {
    position: relative;
    height: 74vh;
    height: 74dvh;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: var(--alert-radius);
    background-color: #fafbfc;
    background-image: radial-gradient(#d5d9e0 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    outline: none;
    cursor: grab;
    touch-action: none; /* one finger moves the diagram, two zoom it */
    -webkit-user-select: none;
    user-select: none;
}

.iflow-canvas:focus-visible {
    border-color: #f4511e;
}

.iflow-canvas.is-moving {
    cursor: grabbing;
}

.iflow-stage,
.iflow-stage svg {
    display: block;
    width: 100%;
    height: 100%;
}

.iflow-stage {
    opacity: 0;
}

.iflow-canvas.is-ready .iflow-stage {
    opacity: 1;
    transition: opacity .3s;
}

.iflow-status {
    position: absolute;
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    color: #777;
    font-size: 14px;
    text-align: center;
}

.iflow-status[hidden] {
    display: none;
}

.iflow-retry,
.iflow-load {
    display: block;
    margin: 12px auto 0;
}

.iflow-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 80px);
    margin: 0;
    padding: 7px 12px;
    border-radius: 16px;
    background: rgba(43, 47, 54, .86);
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    pointer-events: none;
}

/* Bottom right: within the thumb's reach on a phone, and away from the top of the stage in view */
.iflow-controls {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iflow-controls[hidden] {
    display: none;
}

.iflow-controls button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #e4e6eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    color: #444;
    font-size: 15px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.iflow-controls button:focus-visible {
    border-color: #f4511e;
    color: #f4511e;
}

/* ---------- The diagram ---------- */

/* The labels are measured once, when the diagram is drawn. Its font is the system one, so no web font arrives later
   and changes the widths (desktop gets Roboto from Google, with display=swap); should anything else do it, the text
   overflows the box instead of being cut */
#iflow-svg,
#iflow-svg * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; /* over Mermaid's own rules */
}

#iflow-svg foreignObject {
    overflow: visible;
}

#iflow-svg .cluster rect {
    rx: 20px;
    ry: 20px;
    fill: rgba(255, 255, 255, .86);
    stroke: #e4e6eb;
    stroke-width: 1.5px;
}

#iflow-svg .cluster-label .nodeLabel,
#iflow-svg .cluster-label span {
    background: #fff;
    color: #f4511e;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
}

#iflow-svg .node rect,
#iflow-svg .node polygon,
#iflow-svg .node path {
    rx: 14px;
    ry: 14px;
}

/* Lines keep their thickness on screen: zoomed out, the shape of the flow and the colours stay visible */
#iflow-svg .node rect,
#iflow-svg .node polygon,
#iflow-svg .node path,
#iflow-svg .cluster rect,
#iflow-svg .flowchart-link {
    vector-effect: non-scaling-stroke;
}

#iflow-svg .nodeLabel {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
}

#iflow-svg .nodeLabel p {
    margin: 0;
}

#iflow-svg .nodeLabel strong {
    color: #23262b;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}

#iflow-svg .node.ok .nodeLabel,
#iflow-svg .node.ok .nodeLabel strong {
    color: #fff;
}

/* a step that is a link */
#iflow-svg a .nodeLabel strong {
    color: #f4511e;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#iflow-svg a .node {
    cursor: pointer;
}

#iflow-svg .node {
    cursor: pointer;
    transition: opacity .2s;
}

#iflow-svg .flowchart-link {
    transition: opacity .2s;
}

#iflow-svg .edgeLabel p,
#iflow-svg .edgeLabel span {
    color: #5a6270;
    font-size: 13px;
    font-weight: 700;
}

/* The main route (==> in the source): orange, moving. Stepped, so it repaints the SVG 12 times a second, not 60 */
#iflow-svg .flowchart-link.edge-thickness-thick {
    stroke: #f4511e !important;
    stroke-width: 3px !important;
    stroke-dasharray: 9 7 !important;
    animation: iflow-march 1.33s steps(16) infinite;
}

#iflow-svg .iflow-marker-main path {
    fill: #f4511e !important;
    stroke: #f4511e !important;
}

#iflow-svg .flowchart-link.edge-pattern-dotted {
    stroke-dasharray: 3 5 !important;
    stroke-linecap: round;
}

@keyframes iflow-march {
    to {
        stroke-dashoffset: -32;
    }
}

.iflow-canvas.is-moving #iflow-svg .flowchart-link,
.iflow-canvas.is-offscreen #iflow-svg .flowchart-link {
    animation-play-state: paused;
}

/* The tapped step and what it is connected to */
#iflow-svg.is-focus .node:not(.is-lit),
#iflow-svg.is-focus .flowchart-link:not(.is-lit),
#iflow-svg.is-focus .edgeLabel {
    opacity: .16;
}

/* The steps appear one after the other when the diagram is drawn */
#iflow-svg.is-intro .node {
    animation: iflow-appear .4s backwards;
}

@keyframes iflow-appear {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #iflow-svg .flowchart-link.edge-thickness-thick {
        animation: none;
    }
}

/* ---------- Legend ---------- */

.iflow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 12px 2px 0;
    padding: 0;
    color: #666;
    font-size: 13px;
    list-style: none;
}

.iflow-legend li {
    display: flex;
    align-items: center;
    gap: 7px;
}

.iflow-swatch {
    width: 16px;
    height: 16px;
    border: 2px solid;
    border-radius: 5px;
}

.iflow-swatch-req { border-color: #f4511e; background: #fff1ec; }
.iflow-swatch-disp { border-color: #2f6fed; background: #e8f0fe; }
.iflow-swatch-sys { border-color: #6b7486; background: #f3f4f7; }
.iflow-swatch-member { border-color: #1f9d55; background: #e6f6ec; }

.iflow-line {
    width: 24px;
    border-top: 3px dashed #f4511e;
}

.iflow-line-optional {
    border-top: 2px dotted #8d95a3;
}

.iflow-note {
    margin: 10px 2px 0;
    color: #666;
    font-size: 13px;
}

/* ---------- Summary ---------- */

.iflow-steps {
    display: grid;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.iflow-steps li {
    display: flex;
    gap: 14px;
    padding: 16px;
    border: 1px solid #eee;
    border-radius: var(--alert-radius);
    background: #fff;
}

/* Fixed size both ways: the cards turn into columns from 1200px, where a flex-basis would size the height only */
.iflow-step-num {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff1ec;
    color: #f4511e;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
}

.iflow-steps h2 {
    margin: 4px 0 4px;
    color: #2b2b2b;
    font-size: 16px;
    font-weight: 700;
}

.iflow-steps p {
    margin: 0;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.iflow-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.iflow-cta .iflow-join,
.iflow-cta .iflow-join:hover,
.iflow-cta .iflow-join:focus {
    border: 1px solid #f4511e;
    background: #fff;
    color: #f4511e;
}

@media (max-width: 479px) {
    .iflow-cta .btn {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .iflow-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .iflow-steps li:last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1200px) {
    .iflow-steps {
        grid-template-columns: repeat(5, 1fr);
    }

    .iflow-steps li {
        flex-direction: column;
    }

    .iflow-steps li:last-child {
        grid-column: auto;
    }
}

/* ---------- Fullscreen ---------- */

html.iflow-fs-open,
html.iflow-fs-open body {
    overflow: hidden;
}

.iflow.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10050; /* above the header, the chat box (action log) and the sticky help button */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    contain: none;
    background: #fff;
}

.iflow.is-fullscreen .iflow-phases {
    flex: 0 0 auto;
}

.iflow.is-fullscreen .iflow-canvas {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.iflow.is-fullscreen .iflow-legend,
.iflow.is-fullscreen .iflow-note {
    display: none;
}