/* ═══════════════════════════════════════════════════════════════
   WORKFLOW-ENGINE-LANDING.CSS — Complément à financial-reports-landing.css /
   deal-room-landing.css / crm-landing.css. Réutilise les tokens --lp-*
   et les classes .lab-* génériques. Classes spécifiques préfixées lab-wf-
   ═══════════════════════════════════════════════════════════════ */

/* ── DAG / Steps chain visualization ── */
.lab-wf-dag{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.lab-wf-step-row{ display:flex; align-items:center; gap:12px; }
.lab-wf-step-num{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:.7rem; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lab-wf-step-card{ flex:1; display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px 14px; }
.lab-wf-step-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.85rem; flex-shrink:0; }
.lab-wf-step-label{ font-size:.82rem; font-weight:800; color:#fff; }
.lab-wf-step-type{ font-size:.62rem; font-weight:800; padding:2px 8px; border-radius:10px; margin-left:auto; text-transform:uppercase; letter-spacing:.3px; }
.lab-wf-step-connector{ width:1.5px; height:14px; background:rgba(255,255,255,.15); margin-left:12px; }

/* ── Step type grid (14 types) ── */
.lab-wf-types-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.lab-wf-type-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:6px; }
.lab-wf-type-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.lab-wf-type-name{ font-size:.76rem; font-weight:800; color:#fff; }
.lab-wf-type-desc{ font-size:.66rem; color:rgba(255,255,255,.5); line-height:1.5; }

/* ── Template cards (5 templates) ── */
.lab-wf-tpl-card{ display:flex; flex-direction:column; gap:10px; }
.lab-wf-tpl-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.lab-wf-tpl-meta-row{ display:flex; gap:10px; flex-wrap:wrap; font-size:.68rem; color:rgba(255,255,255,.5); font-weight:700; }
.lab-wf-tpl-meta-row span{ display:flex; align-items:center; gap:4px; }
.lab-wf-tpl-chip-row{ display:flex; flex-wrap:wrap; gap:5px; }
.lab-wf-tpl-chip{ font-size:.6rem; font-weight:700; padding:3px 8px; border-radius:20px; border:1px solid currentColor; opacity:.85; }

/* ── HITL modal preview ── */
.lab-wf-hitl-card{ background:rgba(255,255,255,.05); border:1px solid var(--lp-glass-border); border-radius:18px; padding:24px 26px; margin-bottom:22px; }
.lab-wf-hitl-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.lab-wf-hitl-icon{ width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg,#ef4444,#f97316); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; flex-shrink:0; }
.lab-wf-hitl-title{ font-size:1rem; font-weight:900; color:#fff; }
.lab-wf-hitl-sub{ font-size:.72rem; color:rgba(255,255,255,.5); }
.lab-wf-hitl-context{ background:rgba(255,255,255,.04); border-radius:10px; padding:12px 14px; font-size:.76rem; color:rgba(255,255,255,.65); line-height:1.6; margin-bottom:14px; }
.lab-wf-hitl-actions{ display:flex; gap:10px; }
.lab-wf-hitl-btn{ flex:1; padding:10px; border-radius:10px; font-size:.75rem; font-weight:800; text-align:center; }
.lab-wf-hitl-btn.reject{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fca5a5; }
.lab-wf-hitl-btn.approve{ background:linear-gradient(135deg,#10b981,#059669); color:#fff; }

/* ── Run progress / runner card ── */
.lab-wf-runner-card{ background:rgba(255,255,255,.05); border:2px solid rgba(102,126,234,.35); border-radius:16px; padding:18px 20px; margin-bottom:22px; }
.lab-wf-runner-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.lab-wf-runner-badge{ font-size:.68rem; font-weight:800; padding:4px 10px; border-radius:20px; background:rgba(102,126,234,.15); color:#a5b4fc; }
.lab-wf-runner-info{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.72rem; color:rgba(255,255,255,.55); font-weight:700; }
.lab-wf-progress-track{ height:6px; background:rgba(255,255,255,.08); border-radius:10px; overflow:hidden; margin-bottom:6px; }
.lab-wf-progress-fill{ height:100%; border-radius:10px; background:linear-gradient(90deg,#667eea,#764ba2); }
.lab-wf-progress-label{ font-size:.7rem; color:rgba(255,255,255,.5); font-weight:600; margin-bottom:12px; }
.lab-wf-runner-steps{ display:flex; flex-wrap:wrap; gap:6px; }
.lab-wf-runner-step-chip{ display:flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:.68rem; font-weight:700; border:1.5px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:rgba(255,255,255,.6); }
.lab-wf-runner-step-chip.done{ border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.1); color:#6ee7b7; }
.lab-wf-runner-step-chip.active{ border-color:#667eea; background:rgba(102,126,234,.15); color:#a5b4fc; }

/* ── Cost estimate strip ── */
.lab-wf-estimate{ display:flex; gap:16px; flex-wrap:wrap; padding:12px 18px; background:rgba(102,126,234,.06); border-radius:12px; border:1px solid rgba(102,126,234,.18); margin-bottom:22px; }
.lab-wf-est-item{ display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:700; color:rgba(255,255,255,.65); }

/* ── AI model picker row ── */
.lab-wf-model-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.lab-wf-model-chip{ display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); font-size:.78rem; font-weight:700; color:rgba(255,255,255,.75); }
.lab-wf-model-chip img{ width:16px; height:16px; object-fit:contain; }

@media(max-width:1024px){ .lab-wf-types-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .lab-wf-types-grid{ grid-template-columns:1fr; } }