/* ================================================ */
/* DAG Visualization — Pipeline LIVE Mode            */
/* ================================================ */

.dag-container {
    width: 100%;
    padding: 4px 0;
}

.dag-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== PHASE LABELS ===== */

.dag-phase-label {
    font-size: 11px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===== NODES ===== */

.dag-node {
    cursor: default;
}

.dag-node-bg {
    fill: var(--bg-card, #1a1a2e);
    stroke: var(--border-color, #2a2a3e);
    stroke-width: 1.5;
    transition: stroke 0.3s ease, fill 0.3s ease;
}

/* ── Pending ── */
.dag-node-pending .dag-node-bg {
    fill: rgba(26, 26, 46, 0.7);
    stroke: var(--border-color, #2a2a3e);
    opacity: 0.55;
}

.dag-node-pending .dag-node-icon {
    color: var(--text-muted, #6b7280);
    opacity: 0.35;
}

.dag-node-pending .dag-node-label {
    fill: var(--text-muted, #6b7280);
    opacity: 0.45;
}

/* ── Running ── */
.dag-node-running .dag-node-bg {
    fill: rgba(59, 130, 246, 0.10);
    stroke: #3b82f6;
    stroke-width: 2;
}

.dag-node-running .dag-node-icon {
    color: #3b82f6;
}

.dag-node-running .dag-node-label {
    fill: #e2e8f0;
    font-weight: 700;
}

.dag-node-pulse-ring {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 1.5;
    opacity: 0;
    animation: dagNodePulse 2s ease-in-out infinite;
}

.dag-node-spinner circle {
    stroke: #3b82f6;
    stroke-dasharray: 14;
    stroke-dashoffset: 10;
    animation: dagSpin 1s linear infinite;
    transform-origin: 4px 4px;
}

/* ── Completed ── */
.dag-node-completed .dag-node-bg {
    fill: rgba(34, 197, 94, 0.07);
    stroke: #22c55e;
    stroke-width: 1.5;
    animation: dagNodeComplete 0.5s ease forwards;
}

.dag-node-completed .dag-node-icon {
    color: #22c55e;
}

.dag-node-completed .dag-node-label {
    fill: #d1d5db;
}

/* ── Failed ── */
.dag-node-failed .dag-node-bg {
    fill: rgba(239, 68, 68, 0.10);
    stroke: #ef4444;
    stroke-width: 2;
}

.dag-node-failed .dag-node-icon {
    color: #ef4444;
}

.dag-node-failed .dag-node-label {
    fill: #fca5a5;
}

/* ── Skipped ── */
.dag-node-skipped .dag-node-bg {
    fill: rgba(26, 26, 46, 0.5);
    stroke: var(--border-color, #2a2a3e);
    opacity: 0.3;
    stroke-dasharray: 4 3;
}

.dag-node-skipped .dag-node-icon {
    color: var(--text-muted, #6b7280);
    opacity: 0.25;
}

.dag-node-skipped .dag-node-label {
    fill: var(--text-muted, #6b7280);
    opacity: 0.35;
}

/* ===== NODE TEXT ===== */

.dag-node-label {
    font-size: 13px;
    font-weight: 600;
    fill: var(--text-secondary, #a1a1aa);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dag-node-status-text {
    font-size: 11px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    fill: var(--text-muted, #6b7280);
}

.dag-status-done {
    fill: #22c55e;
}

.dag-status-fail {
    fill: #ef4444;
}

.dag-status-skip {
    fill: var(--text-muted, #6b7280);
    opacity: 0.5;
}

/* ===== NODE ICONS ===== */

.dag-node-icon {
    color: var(--text-muted, #6b7280);
}

.dag-node-icon svg {
    stroke: currentColor;
}

/* ===== EDGES ===== */

.dag-edge {
    stroke: var(--border-color, #2a2a3e);
    stroke-width: 1.5;
    opacity: 0.25;
    transition: stroke 0.3s ease, opacity 0.3s ease;
}

.dag-edge-done {
    stroke: #22c55e;
    stroke-width: 1.5;
    opacity: 0.45;
}

.dag-edge-active {
    stroke: #3b82f6;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    opacity: 0.7;
    animation: dagEdgeFlow 0.8s linear infinite;
}

.dag-edge-skipped {
    stroke: var(--border-color, #2a2a3e);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.1;
}

/* ===== ANIMATIONS ===== */

@keyframes dagNodePulse {
    0%   { opacity: 0.4; stroke-width: 1.5; }
    50%  { opacity: 0;   stroke-width: 3.5; }
    100% { opacity: 0;   stroke-width: 1.5; }
}

@keyframes dagNodeComplete {
    0%   { stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5)); }
    100% { stroke-width: 1.5; filter: none; }
}

@keyframes dagEdgeFlow {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -10; }
}

@keyframes dagSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}