/* ==========================================================================
   wf-editor.css — LOT B : habillage du canvas de l'éditeur de workflows
   --------------------------------------------------------------------------
   TOUTES les classes sont préfixées `wfe-` : rien ne peut entrer en conflit
   avec le CSS existant de l'app. Les couleurs sont dérivées des variables du
   thème (--bg, --card, --txt, --txt2, --sep, --blue…) avec un repli codé en
   dur pour que le fichier reste utilisable seul, et une adaptation
   automatique au thème sombre du système.
   ====================================================================== */

/* le conteneur fourni par l'hôte : il doit pouvoir s'étirer */
.wfe-host { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.wfe {
  /* palette locale, dérivée du thème de l'app */
  --wfe-bg:     var(--bg, #f2f2f7);
  --wfe-card:   var(--card, #ffffff);
  --wfe-txt:    var(--txt, #1c1c1e);
  --wfe-txt2:   var(--txt2, #8e8e93);
  --wfe-sep:    var(--sep, rgba(60, 60, 67, .12));
  --wfe-blue:   var(--blue, #007aff);
  --wfe-green:  var(--green, #34c759);
  --wfe-red:    var(--red, #ff3b30);
  --wfe-orange: var(--orange, #ff9500);
  --wfe-r:      var(--radius, 18px);
  --wfe-grid-c: rgba(60, 60, 67, .07);   /* v349 : quadrillage atténué */
  --wfe-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  --wfe-accent: var(--wfe-blue);

  display: flex; flex-direction: column; flex: 1; min-height: 0;
  position: relative; color: var(--wfe-txt);
}

@media (prefers-color-scheme: dark) {
  .wfe {
    --wfe-grid-c: rgba(255, 255, 255, .06);
    --wfe-shadow: 0 2px 12px rgba(0, 0, 0, .55);
  }
}

/* ---- barre d'outils ---------------------------------------------------- */
.wfe-tools {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: .5px solid var(--wfe-sep);
  background: var(--wfe-bg);
}
.wfe-btn {
  min-width: 40px; min-height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; background: var(--wfe-card); color: var(--wfe-txt);
  font: inherit; font-size: 15px; font-weight: 600; border: 0; cursor: pointer;
  box-shadow: var(--wfe-shadow); -webkit-appearance: none; appearance: none;
}
.wfe-btn:hover { filter: brightness(1.06); }
.wfe-btn:active { transform: scale(.96); }
.wfe-btn[disabled] { opacity: .38; cursor: default; transform: none; }
.wfe-btn.wfe-primary { background: var(--wfe-blue); color: #fff; }
.wfe-btn.wfe-danger { color: var(--wfe-red); }
.wfe-btn[aria-pressed="true"] { background: var(--wfe-blue); color: #fff; }
.wfe-sep2 { width: 1px; height: 26px; background: var(--wfe-sep); margin: 0 2px; }
.wfe-grow { flex: 1; }
.wfe-zoom {
  font-size: 13px; font-weight: 700; color: var(--wfe-txt2);
  min-width: 52px; text-align: center; font-variant-numeric: tabular-nums;
}
.wfe-state { font-size: 13px; font-weight: 600; color: var(--wfe-txt2); }
/* sur petit écran, on garde les icônes et on masque les libellés */
@media (max-width: 620px) { .wfe-lbl { display: none; } .wfe-btn { padding: 0 10px; } }

/* ---- bandeau de validation -------------------------------------------- */
.wfe-issues {
  display: flex; gap: 6px; overflow-x: auto; padding: 7px 12px;
  border-bottom: .5px solid var(--wfe-sep); background: var(--wfe-bg);
  scrollbar-width: thin;
}
.wfe-issues[hidden] { display: none; }   /* display:flex écrase [hidden] : à réaffirmer */
.wfe-iss {
  flex: 0 0 auto; max-width: 70vw; padding: 6px 11px; border-radius: 14px;
  font: inherit; font-size: 12.5px; font-weight: 600; border: 0; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wfe-iss-e { background: rgba(255, 59, 48, .14); color: var(--wfe-red); }
.wfe-iss-w { background: rgba(255, 149, 0, .16); color: #a35c00; }
@media (prefers-color-scheme: dark) { .wfe-iss-w { color: var(--wfe-orange); } }

/* ---- zone de dessin ---------------------------------------------------- */
.wfe-view {
  position: relative; flex: 1; min-height: 58dvh; overflow: hidden;
  touch-action: none; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--wfe-bg) 94%, #808080 6%);
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.wfe-view.wfe-panning { cursor: grabbing; }
.wfe-view.wfe-selmode { cursor: crosshair; }        /* mode sélection rectangulaire */
.wfe-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--wfe-grid-c) 1px, transparent 1px),
    linear-gradient(90deg, var(--wfe-grid-c) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
}
.wfe-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wfe-plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.wfe-band {
  position: absolute; border: 1.5px dashed var(--wfe-blue);
  background: rgba(0, 122, 255, .12); border-radius: 4px; pointer-events: none;
}
.wfe-hint {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  max-width: min(92%, 560px); padding: 9px 14px; border-radius: 14px;
  background: var(--wfe-blue); color: #fff; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); z-index: 5; text-align: center;
}
.wfe-mini-btn {
  margin-left: 8px; padding: 3px 10px; border-radius: 10px; border: 0;
  background: rgba(255, 255, 255, .25); color: #fff; font: inherit;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ---- arêtes ------------------------------------------------------------ */
.wfe-edge { fill: none; stroke: var(--wfe-blue); stroke-width: 2.4; opacity: .8; }
.wfe-edge.wfe-e-off { stroke: var(--wfe-txt2); opacity: .4; stroke-dasharray: 6 5; }
.wfe-ehit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; }
.wfe-ehit:hover + .wfe-elabel, .wfe-ehit:hover { stroke: rgba(255, 59, 48, .18); }
.wfe-elabel {
  fill: var(--wfe-txt2); font-size: 11px; font-weight: 700; text-anchor: middle;
  paint-order: stroke; stroke: var(--wfe-bg); stroke-width: 3.5px;
  pointer-events: none; font-family: inherit;
}
.wfe-ghost {
  fill: none; stroke: var(--wfe-blue); stroke-width: 2.4;
  stroke-dasharray: 7 5; opacity: .9; pointer-events: none;
}

/* ---- nœuds ------------------------------------------------------------- */
.wfe-node {
  position: absolute; box-sizing: border-box;
  background: var(--wfe-card); border-radius: 14px;
  padding: 8px 12px 10px; box-shadow: var(--wfe-shadow);
  cursor: grab; touch-action: none; text-align: left;
}
/* liseré de couleur du type : en pseudo-élément (et NON en border-top) pour ne
   pas décaler la hauteur du contenu par rapport à HEAD_H côté JS. */
.wfe-node::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--wfe-accent); border-radius: 14px 14px 0 0;
}
.wfe-node:active { cursor: grabbing; }
/* v349 : le nœud sélectionné se détache (anneau + ombre portée), le reste
   s'efface légèrement — on lit d'abord ce qu'on a choisi. */
.wfe-node.wfe-selected { box-shadow: 0 0 0 3px var(--wfe-blue), 0 10px 28px rgba(0, 0, 0, .18); z-index: 2; }
.wfe-node.wfe-err { outline: 2.5px solid var(--wfe-red); outline-offset: 1px; }
.wfe-node.wfe-warn { outline: 2px solid var(--wfe-orange); outline-offset: 1px; }
.wfe-node.wfe-unreach { opacity: .5; filter: grayscale(.85); }
.wfe-node.wfe-off { opacity: .45; }
.wfe-node.wfe-off.wfe-unreach { opacity: .32; }
.wfe-node.wfe-traced { box-shadow: 0 0 0 2px rgba(0, 122, 255, .35), var(--wfe-shadow); }
.wfe-node.wfe-flash { animation: wfe-flash 0.9s ease 2; }
@keyframes wfe-flash { 0%, 100% { box-shadow: 0 0 0 3px var(--wfe-blue), var(--wfe-shadow); }
                       50% { box-shadow: 0 0 0 10px rgba(0, 122, 255, .18), var(--wfe-shadow); } }

/* ATTENTION : les hauteurs ci-dessous DOIVENT rester synchronisées avec les
   constantes de wf-editor.js (HEAD_H = 8 + 20 + 24 = 52, PORT_H = 26,
   NODE_PAD = 10) — c'est ce qui fait que les pastilles de port tombent
   exactement sur l'ancrage calculé des courbes. */
.wfe-nh {
  display: flex; align-items: center; gap: 6px; font-size: 14px;
  height: 20px; min-width: 0;
}
.wfe-nh b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfe-ico { font-size: 15px; flex: 0 0 auto; }
.wfe-tag {
  font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 8px;
  background: var(--wfe-sep); color: var(--wfe-txt2); text-transform: uppercase;
}
.wfe-w { color: var(--wfe-red); font-weight: 900; flex: 0 0 auto; }
.wfe-ns {
  font-size: 12.5px; color: var(--wfe-txt2); margin: 0; height: 24px;
  line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wfe-np {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  height: 26px; box-sizing: border-box;
}
.wfe-pl { font-size: 11.5px; font-weight: 600; color: var(--wfe-txt2); }

/* ports : cible tactile élargie par un ::before invisible */
.wfe-port {
  width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; flex: 0 0 auto;
  background: var(--wfe-card); border: 2.5px solid var(--wfe-accent);
  position: relative; cursor: crosshair; touch-action: none;
}
.wfe-port::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.wfe-port.wfe-in { position: absolute; left: -9px; top: 14px; border-color: var(--wfe-txt2); }
.wfe-port.wfe-out { margin-right: -19px; }
.wfe-port:hover { box-shadow: 0 0 0 4px rgba(0, 122, 255, .18); }
.wfe-port.wfe-pending {
  background: var(--wfe-blue); border-color: var(--wfe-blue);
  box-shadow: 0 0 0 6px rgba(0, 122, 255, .28);
  animation: wfe-pulse 1.1s ease-in-out infinite;
}
@keyframes wfe-pulse { 50% { box-shadow: 0 0 0 10px rgba(0, 122, 255, .12); } }

.wfe-badge {
  position: absolute; right: -8px; top: -11px;
  background: var(--wfe-card); border: 1px solid var(--wfe-sep);
  border-radius: 11px; padding: 1px 7px; font-size: 11px; font-weight: 800;
  box-shadow: var(--wfe-shadow); white-space: nowrap;
}
.wfe-badge.wfe-b-left { right: auto; left: -8px; }
.wfe-badge.wfe-b-ok { color: var(--wfe-green); }
.wfe-badge.wfe-b-bad { color: var(--wfe-red); }
.wfe-badge.wfe-b-wait { color: var(--wfe-orange); }
.wfe-badge.wfe-b-info { color: var(--wfe-blue); }

/* ---- minimap ----------------------------------------------------------- */
.wfe-mini {
  position: absolute; right: 12px; bottom: 12px; width: 152px; height: 108px;
  border-radius: 12px; background: color-mix(in srgb, var(--wfe-card) 82%, transparent);
  border: 1px solid var(--wfe-sep); box-shadow: var(--wfe-shadow);
  overflow: hidden; touch-action: none; cursor: pointer; z-index: 4;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.wfe-mini-in { position: absolute; inset: 0; }
.wfe-mini-in i { position: absolute; border-radius: 2px; opacity: .85; }
.wfe-mini-vp {
  position: absolute; border: 1.5px solid var(--wfe-blue);
  background: rgba(0, 122, 255, .10); border-radius: 3px; pointer-events: none;
}
@media (max-width: 520px) { .wfe-mini { width: 116px; height: 84px; } }

/* ---- panneaux (palette / configuration) -------------------------------- */
.wfe-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: 344px; z-index: 6;
  display: flex; flex-direction: column;
  background: var(--wfe-bg); border-left: .5px solid var(--wfe-sep);
  box-shadow: -6px 0 22px rgba(0, 0, 0, .16);
  animation: wfe-slide .18s ease;
}
@keyframes wfe-slide { from { transform: translateX(14px); opacity: .4; } }
.wfe-panel[hidden] { display: none; }
.wfe-pal { width: 322px; }                 /* palette de nœuds */
.wfe-cfg { width: 360px; }                 /* configuration d'un nœud */
.wfe-ph {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: .5px solid var(--wfe-sep); font-size: 16px;
}
.wfe-ph b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wfe-pf { padding: 10px 14px 4px; }
.wfe-pf input {
  width: 100%; border: 0; background: var(--wfe-card); color: var(--wfe-txt);
  border-radius: 12px; padding: 11px 14px; font: inherit; font-size: 16px;
  min-height: 42px; -webkit-appearance: none; appearance: none;
}
.wfe-plist, .wfe-pb { flex: 1; overflow-y: auto; padding: 8px 14px 20px; -webkit-overflow-scrolling: touch; }
.wfe-pg { margin-bottom: 12px; }
.wfe-pg[hidden] { display: none; }
.wfe-pg h4 {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--wfe-txt2); margin: 10px 2px 6px;
}
.wfe-pi {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
  padding: 10px 13px; margin-bottom: 5px; border: 0; border-radius: 12px;
  background: var(--wfe-card); color: var(--wfe-txt); box-shadow: var(--wfe-shadow);
  font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.wfe-pi[hidden] { display: none; }
.wfe-pi:active { transform: scale(.985); }

/* champs du panneau de configuration */
.wfe-f { display: block; margin-bottom: 12px; }
.wfe-fl {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--wfe-txt2);
  margin: 0 2px 5px; text-transform: none;
}
.wfe-fh { display: block; font-size: 11.5px; color: var(--wfe-txt2); margin: 4px 2px 0; }
.wfe-f input[type="text"], .wfe-f input[type="number"], .wfe-f input[type="search"],
.wfe-f select, .wfe-f textarea {
  width: 100%; border: 0; background: var(--wfe-card); color: var(--wfe-txt);
  border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 16px;
  min-height: 42px; -webkit-appearance: none; appearance: none;
}
.wfe-f textarea { resize: vertical; line-height: 1.4; }
.wfe-f select[multiple] { padding: 6px; }
.wfe-f .wfe-bad { outline: 2px solid var(--wfe-red); }
.wfe-fb { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.wfe-fb input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; }
.wfe-fb .wfe-fl { margin: 0; font-size: 15px; color: var(--wfe-txt); font-weight: 600; }
.wfe-note {
  background: var(--wfe-card); border-radius: 12px; padding: 10px 13px;
  font-size: 12.5px; line-height: 1.45; color: var(--wfe-txt2); margin-bottom: 12px;
}
.wfe-note-warn { border-left: 4px solid var(--wfe-orange); color: var(--wfe-txt); }
.wfe-note-err { border-left: 4px solid var(--wfe-red); color: var(--wfe-txt); }
.wfe-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ---- accessibilité ----------------------------------------------------- */
.wfe :focus-visible, .wfe-view:focus-visible, .wfe-node:focus-visible, .wfe-mini:focus-visible {
  outline: 3px solid var(--wfe-blue); outline-offset: 2px;
}
.wfe-node:focus-visible { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .wfe-panel, .wfe-node, .wfe-port { animation: none !important; }
  .wfe-node.wfe-flash { animation: none !important; }
}

/* ---- responsive : tablette / téléphone --------------------------------- */
@media (max-width: 860px) {
  .wfe-panel {
    left: 0; right: 0; top: auto; bottom: 0; width: auto;
    max-height: 64%; border-left: 0; border-top: .5px solid var(--wfe-sep);
    border-radius: var(--wfe-r) var(--wfe-r) 0 0;
    box-shadow: 0 -8px 26px rgba(0, 0, 0, .22);
    padding-bottom: env(safe-area-inset-bottom);
  }
  @keyframes wfe-slide { from { transform: translateY(18px); opacity: .4; } }
  .wfe-view { min-height: 52dvh; }
}

/* ---------- sélecteur de variables prédéfinies (bouton « {{ }} ») ---------- */
.wfe-varbtn { margin-left: 8px; padding: 2px 8px; border-radius: 8px; font-size: 12px;
  font-weight: 700; font-family: ui-monospace, Menlo, monospace;
  background: var(--wfe-chip, rgba(120,120,128,.16)); color: var(--blue, #007aff);
  min-height: 26px; cursor: pointer; }
.wfe-varbtn:hover { background: rgba(0,122,255,.16); }
.wfe-varbtn:focus-visible { outline: 2px solid var(--blue, #007aff); outline-offset: 2px; }
.wfe-vars { margin: -4px 0 12px; border: 1px solid var(--wfe-sep, rgba(120,120,128,.24));
  border-radius: 12px; background: var(--wfe-card, #fff); overflow: hidden;
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
.wfe-vars-h { display: flex; gap: 8px; align-items: center; padding: 8px;
  position: sticky; top: 0; background: inherit;
  border-bottom: 1px solid var(--wfe-sep, rgba(120,120,128,.24)); }
.wfe-vars-h input { flex: 1; min-width: 0; font-size: 16px; padding: 8px 10px;
  border-radius: 9px; border: 1px solid var(--wfe-sep, rgba(120,120,128,.24));
  background: transparent; color: inherit; }
.wfe-vars-g { padding: 6px 0; }
.wfe-vars-gt { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--txt2, #8e8e93); padding: 4px 10px; font-weight: 700; }
.wfe-vars-i { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
  width: 100%; text-align: left; padding: 9px 10px; min-height: 44px; cursor: pointer;
  background: none; border: 0; color: inherit; }
.wfe-vars-i:hover { background: rgba(0,122,255,.10); }
.wfe-vars-i:focus-visible { outline: 2px solid var(--blue, #007aff); outline-offset: -2px; }
.wfe-vars-i code { font-size: 12.5px; font-family: ui-monospace, Menlo, monospace;
  color: var(--blue, #007aff); background: rgba(0,122,255,.10);
  padding: 1px 6px; border-radius: 6px; }
.wfe-vars-l { font-size: 13.5px; }
.wfe-vars-s { font-size: 12px; color: var(--txt2, #8e8e93); font-style: italic;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfe-vars-e, .wfe-vars-f { padding: 10px; font-size: 12.5px; color: var(--txt2, #8e8e93); }
.wfe-vars-f { border-top: 1px solid var(--wfe-sep, rgba(120,120,128,.24)); }
.wfe-vars-f code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }