/* =============================================================================
   Dispatch Status Flow — shared stepper component
   Used by admin dispatch cards, citizen tracking, responder console & legends.
   Lifecycle: approved → en_route → on_scene → returning → completed
   ============================================================================= */

.status-flow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    padding: var(--space-2) 0;
    position: relative;
}

.status-flow-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    position: relative;
    min-width: 0;
}

/* Connector line between dots */
.status-flow-step::before {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(-50% + 18px);
    width: calc(100% - 36px);
    height: 3px;
    background: var(--gray-200);
    transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}
.status-flow-step:first-child::before { display: none; }
.status-flow-step.passed::before { background: var(--success); }

/* Dot */
.status-flow-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-300);
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.status-flow-dot svg { width: 18px; height: 18px; }

.status-flow-step.passed .status-flow-dot {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    box-shadow: 0 0 0 4px hsl(142, 71%, 92%);
}

/* Active step — pulsing halo */
.status-flow-step.active .status-flow-dot {
    background: var(--flow-color, var(--info));
    border-color: var(--flow-color, var(--info));
    color: #fff;
    box-shadow: 0 0 0 4px var(--flow-glow, hsla(199, 89%, 48%, 0.18));
    animation: flow-pulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes flow-pulse {
    0%   { box-shadow: 0 0 0 4px var(--flow-glow, hsla(199, 89%, 48%, 0.18)); }
    50%  { box-shadow: 0 0 0 9px var(--flow-glow, hsla(199, 89%, 48%, 0.05)); }
    100% { box-shadow: 0 0 0 4px var(--flow-glow, hsla(199, 89%, 48%, 0.18)); }
}

/* Labels */
.status-flow-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    transition: color 0.3s;
    white-space: nowrap;
}
.status-flow-desc {
    font-size: 0.62rem;
    color: var(--gray-300);
    transition: color 0.3s;
}
.status-flow-step.passed .status-flow-label { color: var(--gray-600); }
.status-flow-step.passed .status-flow-desc { color: var(--gray-400); }
.status-flow-step.active .status-flow-label { color: var(--flow-color, var(--navy)); }
.status-flow-step.active .status-flow-desc { color: var(--flow-color, var(--gray-500)); }

/* Small / compact variant (legend, narrow cards) */
.status-flow.compact .status-flow-dot {
    width: 28px;
    height: 28px;
}
.status-flow.compact .status-flow-dot svg { width: 14px; height: 14px; }
.status-flow.compact .status-flow-step::before {
    top: 12px;
    left: calc(-50% + 14px);
    width: calc(100% - 28px);
    height: 2px;
}
.status-flow.compact .status-flow-desc { display: none; }

@media (max-width: 480px) {
    .status-flow .status-flow-desc { display: none; }
    .status-flow-label { font-size: 0.55rem; }
}

/* Legend chip list */
.flow-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.flow-legend-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    background: var(--white);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.flow-legend-row:hover {
    transform: translateX(3px);
    box-shadow: var(--shadow-sm);
}
.flow-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.flow-legend-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-800);
    flex: 1;
    text-transform: capitalize;
}
.flow-legend-meaning {
    font-size: var(--text-xs);
    color: var(--gray-400);
    text-align: right;
}