/* Thème de l'éditeur de parcours — partagé par la console (/admin) et l'application (/app).
   Règle de couleur : les cartes restent blanches, la couleur ne sert qu'à l'accent (icône, filet, libellé de sortie).
   Un problème se signale par un contour, jamais par un aplat de couleur qui rend le texte illisible. */

.flow { display: grid; grid-template-columns: 208px 1fr; gap: 12px; margin-top: 12px; }
.flow__palette { display: flex; flex-direction: column; gap: 5px; max-height: 620px; overflow-y: auto; padding-right: 2px; }
.flow__fam { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #93A1B5; margin: 10px 0 2px 4px; }
.flow__fam:first-child { margin-top: 0; }
.flow__add { display: flex; align-items: center; gap: 9px; text-align: left; border: 1px solid #E6EBF3; background: #fff; border-radius: 12px; padding: 7px 10px; font-size: 13px; font-weight: 600; color: #0E2341; }
.flow__add i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 12px; flex: none; }
.flow__add:hover { border-color: #3C7AFA; background: #F7FAFF; }

.flow__canvas { height: 560px; border: 1px solid #E6EBF3; border-radius: 16px; background: #FBFCFE; background-image: radial-gradient(#DDE4EE 1px, transparent 1px); background-size: 22px 22px; overflow: hidden; }

/* La carte du nœud : blanche, sobre, lisible. On neutralise les couleurs par défaut de Drawflow (dont le rouge vif de la sélection). */
.drawflow .drawflow-node { background: #fff !important; border: 1px solid #E6EBF3; border-radius: 16px; padding: 0; width: 256px; color: #0E2341;
  box-shadow: 0 8px 22px -14px rgba(14, 35, 65, .45); transition: box-shadow .15s ease, border-color .15s ease; }
.drawflow .drawflow-node:hover { border-color: #C9D6EA; }
.drawflow .drawflow-node.selected { background: #fff !important; border-color: #3C7AFA; box-shadow: 0 0 0 3px rgba(60, 122, 250, .18), 0 10px 26px -14px rgba(14, 35, 65, .5); }
.drawflow .drawflow-node .drawflow_content_node { width: 100%; }
.drawflow .connection .main-path { stroke: #B6C4DA; stroke-width: 2.5px; }
.drawflow .connection .main-path:hover, .drawflow .connection .main-path.selected { stroke: #3C7AFA; }
.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { box-sizing: border-box; background: #fff; border: 2px solid #3C7AFA; width: 13px; height: 13px; top: 0; box-shadow: 0 1px 3px rgba(14, 35, 65, .2); }
.drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { background: #3C7AFA; }
/* Les sorties partent du haut, en face de leurs libellés (oui / non / critères / branches). */
.drawflow .drawflow-node .outputs { position: absolute; right: -7px; top: 46px; display: flex; flex-direction: column; gap: 0; }
.drawflow .drawflow-node .outputs .output { position: relative; top: auto; right: auto; margin: 0 0 12px; }
.drawflow .drawflow-node .outputs .output:last-child { margin-bottom: 0; }
.drawflow .drawflow-node .inputs .input { top: 22px; }

.fnode { padding: 11px 13px 13px; font-size: 12.5px; }
.fnode__h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.fnode__h i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: 13px; flex: none; }
.fnode__h span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnode__del { border: 0; background: transparent; color: #B6C4DA; font-size: 13px; line-height: 1; padding: 2px 0 2px 4px; cursor: pointer; }
.fnode__del:hover { color: #B3261E; }
/* Les libellés de sortie : une ligne de 13 px, un écart de 12 px — exactement le pas des pastilles à droite. */
.fnode__outs { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; margin: 0 0 10px; }
.fnode__out { height: 13px; line-height: 13px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #1D4ED8; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnode__out--no { color: #93A1B5; }
.fnode__resume { font-size: 12px; color: #485971; background: #F7F9FC; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.fnode__cfg { width: 100%; border: 1px solid #D9E2F1; background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: #1D4ED8; cursor: pointer; }
.fnode__cfg:hover { background: #F5F8FF; }
.fnode__l { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #93A1B5; font-weight: 700; margin: 8px 0 3px; }
.fnode input, .fnode select, .fnode textarea { width: 100%; padding: 6px 9px; border: 1px solid #DCE4F0; border-radius: 9px; font: inherit; font-size: 12.5px; background: #fff; color: #0E2341; }
.fnode textarea { min-height: 62px; resize: vertical; }
.fnode input:focus, .fnode select:focus, .fnode textarea:focus { outline: 2px solid rgba(60, 122, 250, .35); outline-offset: 1px; border-color: #3C7AFA; }

/* Le filet d'accent en haut de chaque carte, par famille de nœud. */
.drawflow .drawflow-node.fnode-trigger { border-top: 3px solid #137A3A; }
.drawflow .drawflow-node.fnode-mail, .drawflow .drawflow-node.fnode-webhook { border-top: 3px solid #1D4ED8; }
.drawflow .drawflow-node.fnode-wait, .drawflow .drawflow-node.fnode-si_ouvert, .drawflow .drawflow-node.fnode-si { border-top: 3px solid #5B21B6; }
.drawflow .drawflow-node.fnode-split { border-top: 3px solid #0F766E; }
.drawflow .drawflow-node.fnode-liste, .drawflow .drawflow-node.fnode-etape, .drawflow .drawflow-node.fnode-tache { border-top: 3px solid #0369A1; }
.drawflow .drawflow-node.fnode-alerte { border-top: 3px solid #B3261E; }
.drawflow .drawflow-node.fnode-stop { border-top: 3px solid #0E2341; }

/* Les critères d'une condition, dans la fenêtre de configuration de l'hôte. */
.crit { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.crit select, .crit input { padding: 7px 9px; font-size: 13px; border-radius: 9px; }
.crit button { border: 1px solid #F4C7C7; background: #fff; color: #B3261E; border-radius: 9px; padding: 6px 9px; font-size: 12.5px; font-weight: 600; }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; }
  .flow__palette { flex-direction: row; flex-wrap: wrap; max-height: none; }
  .flow__fam { width: 100%; margin: 6px 0 0; }
  .flow__canvas { height: 440px; }
  .crit { grid-template-columns: 1fr 1fr; }
}