/* ==========================================================================
   pages/workflow.css — Workflow Studio
   "Obsidian & Champagne" — myTradingMCP Luxury Edition
   Layout: Rail (catalogue) · Éditeur YAML + Runner · Inspecteur résultat
   ========================================================================== */

.workflow-page { display: flex; flex-direction: column; gap: var(--space-lg); }

/* ============================================================
   1. HERO
   ============================================================ */
.wf-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem; padding: 1.4rem 1.75rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--surface-2); position: relative; overflow: hidden;
}
.wf-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(201,169,110,.35) 50%, transparent 90%);
}
@media (max-width: 900px) { .wf-hero { flex-direction: column; } }

.wf-hero__copy { display: flex; flex-direction: column; gap: .4rem; }
.wf-hero__copy h1 { margin: 0; font-family: var(--font-display); font-weight: 400; }

.wf-eyebrow {
  font-size: var(--fs-kicker); letter-spacing: var(--track-kicker);
  text-transform: uppercase; color: var(--color-accent); font-weight: 500;
}
.wf-hero__desc {
  font-size: var(--text-sm); color: var(--color-text-muted);
  max-width: 60ch; line-height: 1.6; margin: 0;
}

.wf-lineage {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .65rem;
}
.wf-lineage-node {
  font-size: .6rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: .15rem .55rem; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.wf-lineage-node--active {
  border-color: rgba(201,169,110,.4); color: var(--color-accent);
  background: rgba(201,169,110,.08);
}
.wf-lineage-arrow { color: var(--color-text-faint); font-size: var(--text-xs); }

.wf-hero__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; flex-shrink: 0;
}

/* KPIs */
.wf-kpis { display: flex; gap: 1.1rem; }
.wf-kpi { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.wf-kpi__label { font-size: .58rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-faint); }
.wf-kpi__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; }

.wf-hero__actions { display: flex; gap: .45rem; }

/* Banner */
.wf-banner:not([hidden]) {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); font-size: var(--text-sm);
}
.wf-banner.is-success { border-color: rgba(74,222,128,.28); color: var(--color-success); background: rgba(74,222,128,.06); }
.wf-banner.is-danger  { border-color: rgba(248,113,113,.28); color: var(--color-danger);  background: rgba(248,113,113,.06); }
.wf-banner.is-info    { border-color: rgba(201,169,110,.28); color: var(--color-accent);  background: rgba(201,169,110,.06); }
.wf-banner.is-warning { border-color: rgba(251,191,36,.28);  color: var(--color-warning); background: rgba(251,191,36,.06); }

/* ============================================================
   2. WORKSPACE — 3 columns
   ============================================================ */
.wf-workspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  min-height: 620px;
}
@media (max-width: 1200px) { .wf-workspace { grid-template-columns: 200px minmax(0,1fr) 270px; } }
@media (max-width: 900px)  { .wf-workspace { grid-template-columns: 1fr; } }

/* ============================================================
   3. RAIL — Catalogue
   ============================================================ */
.wf-rail {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--color-border-light);
  background: rgba(0,0,0,.05); overflow: hidden;
}

.wf-rail__toolbar {
  padding: .7rem .85rem .5rem; border-bottom: 1px solid var(--color-border-light); flex-shrink: 0;
}
.wf-search-wrap {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 0 .6rem; height: 28px;
  transition: border-color var(--transition-base);
}
.wf-search-wrap:focus-within { border-color: rgba(201,169,110,.40); }
.wf-search-icon { color: var(--color-text-faint); flex-shrink: 0; }
.wf-search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--color-text); font-size: var(--text-xs); padding: 0;
}
.wf-search-input::placeholder { color: var(--color-text-faint); }

/* Catalogue list */
.wf-rail__list {
  flex: 1; overflow-y: auto; padding: .5rem 0;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}

/* Workflow card in rail */
.wf-catalogue-item {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .55rem .85rem; cursor: pointer; border: none; background: transparent;
  width: 100%; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background var(--transition-base);
  position: relative;
}
.wf-catalogue-item:hover { background: rgba(255,255,255,.025); }
.wf-catalogue-item.is-selected {
  background: rgba(201,169,110,.08);
  box-shadow: inset 2px 0 0 rgba(201,169,110,.7);
}

.wf-catalogue-item__id {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  color: var(--color-accent); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-catalogue-item__desc {
  font-size: .62rem; color: var(--color-text-faint); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-catalogue-item__meta {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .15rem;
}
.wf-item-tag {
  font-size: .52rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: .08rem .38rem; border-radius: var(--radius-full);
  background: rgba(255,255,255,.04); border: 1px solid var(--color-border-light);
  color: var(--color-text-faint);
}
.wf-item-tag--steps { color: var(--color-accent); border-color: rgba(201,169,110,.2); background: rgba(201,169,110,.06); }
.wf-item-tag--valid { color: var(--color-success); border-color: rgba(74,222,128,.2); background: rgba(74,222,128,.06); }
.wf-item-tag--error { color: var(--color-danger);  border-color: rgba(248,113,113,.2); background: rgba(248,113,113,.06); }

/* New workflow item (unsaved) */
.wf-catalogue-item.is-new { border-left: 2px solid rgba(251,191,36,.5); }
.wf-catalogue-item.is-new .wf-catalogue-item__id { color: var(--color-warning); }

.wf-rail__footer {
  padding: .55rem .85rem; border-top: 1px solid var(--color-border-light); flex-shrink: 0;
}
.wf-rail__count { font-family: var(--font-mono); font-size: .6rem; color: var(--color-text-faint); }

/* ============================================================
   4. EDITOR — YAML + Runner
   ============================================================ */
.wf-editor {
  display: flex; flex-direction: column; overflow: hidden;
  border-right: 1px solid var(--color-border-light);
}

.wf-editor__topbar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .55rem 1rem; border-bottom: 1px solid var(--color-border-light);
  background: rgba(0,0,0,.04); flex-shrink: 0;
}
.wf-editor__id {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
}
.wf-editor__id-text {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-accent); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-editor__actions { display: flex; gap: .3rem; flex-shrink: 0; }
.wf-discard-btn { color: var(--color-text-faint) !important; }

/* YAML zone */
.wf-yaml-zone {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}
.wf-yaml-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .4rem 1rem; background: rgba(0,0,0,.04);
  border-bottom: 1px solid var(--color-border-light); flex-shrink: 0;
}
.wf-yaml-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--color-text-faint);
}
.wf-yaml-status {
  font-size: .65rem; color: var(--color-text-faint); font-family: var(--font-mono);
}
.wf-yaml-dirty-badge {
  display: inline-flex; align-items: center;
  padding: .08rem .45rem; border-radius: var(--radius-full);
  font-size: .55rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25);
  color: var(--color-warning);
}

.wf-yaml-editor {
  flex: 1;
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1.7;
  resize: none;
  border: none;
  outline: none;
  background: var(--surface-2);
  color: var(--color-text-dim, rgba(240,237,230,0.85));
  padding: .85rem 1rem;
  tab-size: 2;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.wf-yaml-editor::placeholder { color: var(--color-text-faint); line-height: 1.7; }
.wf-yaml-editor:focus { outline: none; }

/* Runner */
.wf-runner {
  border-top: 1px solid var(--color-border-light);
  padding: .75rem 1rem;
  background: rgba(0,0,0,.04);
  flex-shrink: 0;
}
.wf-runner__head {
  display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem;
}
.wf-runner__label {
  font-size: .58rem; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--color-text-faint);
}
.wf-validation-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .5rem; border-radius: var(--radius-full);
  font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25);
  color: var(--color-success);
}
.wf-validation-badge svg { color: var(--color-success); }

/* Dynamic inputs form */
.wf-inputs {
  display: flex; flex-direction: column; gap: .5rem; margin-bottom: .65rem;
}
.wf-input-field { display: flex; flex-direction: column; gap: .2rem; }
.wf-input-label {
  font-size: .6rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-faint);
  display: flex; align-items: center; gap: .4rem;
}
.wf-input-required {
  font-size: .55rem; color: var(--color-accent);
  font-weight: 700; letter-spacing: .05em;
}
.wf-input-default {
  font-size: .55rem; color: var(--color-text-faint);
  font-family: var(--font-mono); margin-left: auto;
}
.wf-input-control {
  font-family: var(--font-mono); font-size: var(--text-xs);
  height: 28px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--color-text);
  padding: 0 .6rem;
  transition: border-color var(--transition-base);
}
.wf-input-control:focus { outline: none; border-color: rgba(201,169,110,.4); }
.wf-input-control.is-required { border-color: rgba(201,169,110,.3); }

/* Inputs grid for optional params */
.wf-inputs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
}

/* Boolean toggle */
.wf-bool-toggle {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--text-xs); color: var(--color-text-muted);
  cursor: pointer; height: 28px;
}
.wf-bool-toggle input[type="checkbox"] { cursor: pointer; }

.wf-runner__foot { display: flex; align-items: center; gap: .5rem; }
.wf-run-btn { flex: 1; justify-content: center; }

/* Running state overlay */
.wf-running-indicator {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--text-xs); color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ============================================================
   5. INSPECTOR — Résultat
   ============================================================ */
.wf-inspector { display: flex; flex-direction: column; overflow: hidden; }
.wf-inspector__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; border-bottom: 1px solid var(--color-border-light);
  background: rgba(0,0,0,.04); flex-shrink: 0;
}
.wf-inspector__label {
  font-size: .58rem; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--color-text-faint);
}
.wf-inspector__status {
  font-family: var(--font-mono); font-size: .65rem; color: var(--color-text-faint);
}

.wf-inspector__body {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}

/* Empty result */
.wf-result-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .75rem; padding: 3rem 1.5rem; text-align: center; color: var(--color-text-faint); height: 100%;
}
.wf-result-empty svg { opacity: .4; color: var(--color-text-faint); }
.wf-result-empty p   { font-size: var(--text-xs); margin: 0; }

/* Result sections */
.wf-result-section { border-bottom: 1px solid var(--color-border-light); padding: .75rem 1rem; }
.wf-result-section:last-child { border-bottom: none; }
.wf-result-section__label {
  font-size: .58rem; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--color-text-faint); margin-bottom: .5rem;
}

/* Status banner in result */
.wf-result-status-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .85rem; border-radius: var(--radius-sm);
  margin-bottom: .2rem;
}
.wf-result-status-bar.is-ok {
  background: rgba(74,222,128,.06); border: 1px solid rgba(74,222,128,.2);
}
.wf-result-status-bar.is-error {
  background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.2);
}
.wf-result-status-bar.is-running {
  background: rgba(201,169,110,.06); border: 1px solid rgba(201,169,110,.2);
}

.wf-result-status-icon { flex-shrink: 0; }
.wf-result-status-icon.ok   { color: var(--color-success); }
.wf-result-status-icon.err  { color: var(--color-danger); }
.wf-result-status-icon.run  { color: var(--color-accent); }

.wf-result-status-text { font-size: var(--text-sm); font-weight: 500; }
.wf-result-status-text.ok  { color: var(--color-success); }
.wf-result-status-text.err { color: var(--color-danger); }
.wf-result-status-text.run { color: var(--color-accent); }

/* Metrics grid */
.wf-metrics-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .45rem;
}
.wf-metric { display: flex; flex-direction: column; gap: .05rem; }
.wf-metric span {
  font-size: .55rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-faint);
}
.wf-metric strong {
  font-family: var(--font-mono); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums; color: var(--color-text);
}

/* Steps trace */
.wf-steps-trace { display: flex; flex-direction: column; gap: .3rem; }
.wf-step-row {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .35rem .55rem; background: var(--surface-3);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-sm);
}
.wf-step-row.is-ok    { border-left: 2px solid rgba(74,222,128,.5); }
.wf-step-row.is-error { border-left: 2px solid rgba(248,113,113,.5); }
.wf-step-row.is-skip  { opacity: .55; }
.wf-step-id   { font-family: var(--font-mono); font-size: .65rem; color: var(--color-accent); flex: 1; }
.wf-step-action { font-size: .6rem; color: var(--color-text-faint); }
.wf-step-ms   { font-family: var(--font-mono); font-size: .58rem; color: var(--color-text-faint); }

/* Raw JSON toggle */
.wf-raw-toggle {
  background: transparent; border: none; font-size: .62rem;
  color: var(--color-text-faint); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; padding: 0; transition: color var(--transition-base);
  margin-top: .5rem;
}
.wf-raw-toggle:hover { color: var(--color-text-muted); }
.wf-raw-block {
  margin-top: .5rem; font-family: var(--font-mono); font-size: .65rem;
  background: var(--surface-3); border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm); padding: .6rem .75rem;
  overflow-x: auto; max-height: 200px; overflow-y: auto;
  color: var(--color-text-dim); line-height: 1.6; white-space: pre;
}

/* ============================================================
   6. MODAL — Nouveau workflow
   ============================================================ */
.wf-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.wf-modal {
  background: var(--surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  width: min(540px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  position: relative;
}
.wf-modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.45), transparent);
}
.wf-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1.1rem 1.35rem .85rem;
  border-bottom: 1px solid var(--color-border-light); flex-shrink: 0;
}
.wf-modal__kicker {
  font-size: .62rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-accent); margin: 0 0 .2rem;
}
.wf-modal__title {
  font-family: var(--font-display); font-size: 1.2rem;
  font-weight: 400; letter-spacing: -.02em; margin: 0;
}
.wf-modal__close {
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text-muted); padding: .2rem; border-radius: var(--radius-sm);
  display: flex; align-items: center; transition: color var(--transition-base); flex-shrink: 0;
}
.wf-modal__close:hover { color: var(--color-text); }
.wf-modal__body { flex: 1; overflow-y: auto; padding: 1.1rem 1.35rem; }
.wf-modal__desc { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 1rem; line-height: 1.6; }

.wf-modal__field { display: flex; flex-direction: column; gap: .28rem; }
.wf-modal__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.wf-modal__hint { font-size: .65rem; color: var(--color-text-faint); margin: 0; }
.wf-mono-input { font-family: var(--font-mono); letter-spacing: .04em; }

/* Template selector */
.wf-template-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .4rem;
}
.wf-tpl-btn {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .65rem .85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: transparent; cursor: pointer;
  text-align: left; transition: border-color var(--transition-base), background var(--transition-base);
}
.wf-tpl-btn:hover { border-color: var(--color-border-strong); background: rgba(255,255,255,.02); }
.wf-tpl-btn.is-active { border-color: rgba(201,169,110,.4); background: rgba(201,169,110,.07); }
.wf-tpl-btn strong { font-size: var(--text-xs); font-weight: 600; color: var(--color-text); }
.wf-tpl-btn.is-active strong { color: var(--color-accent); }
.wf-tpl-btn span { font-size: .62rem; color: var(--color-text-faint); }

.wf-modal__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .85rem 1.35rem;
  border-top: 1px solid var(--color-border-light);
  background: rgba(0,0,0,.06); flex-shrink: 0; flex-wrap: wrap;
}
.wf-modal__footnote { font-size: .65rem; color: var(--color-text-faint); margin: 0; }
.wf-modal__footer-actions { display: flex; gap: .5rem; }


.wf-timeout-control{display:flex;align-items:center;gap:.55rem;min-width:12rem}
.wf-timeout-control__label{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-faint)}
.wf-timeout-control__select{min-width:8.5rem;padding:.55rem .75rem;border-radius:12px;border:1px solid var(--color-border);background:rgba(12,16,26,.92);color:var(--color-text);font-size:.76rem;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
@media (max-width: 960px){.wf-runner__foot{flex-direction:column;align-items:stretch}.wf-timeout-control{width:100%}.wf-timeout-control__select{width:100%}}