/* ===========================================================================
 * wf-inspector.css — Lot E (panneau de mapping + historique d'exécution).
 *
 * Règles du projet respectées ici :
 *   - TOUTES les classes sont préfixées `wfi-` (aucune collision possible avec
 *     tablette.css / wf-editor.css) ;
 *   - les couleurs viennent des variables de thème de l'app (--bg, --card,
 *     --txt, --txt2, --blue, --sep…) ; on ne les REDÉFINIT jamais globalement.
 *     On les recopie dans des variables locales `--wfi-*` avec un REPLI, de
 *     sorte que le panneau reste lisible même chargé seul ;
 *   - thème CLAIR et thème SOMBRE : quand l'app ne fournit pas les variables,
 *     le repli suit `prefers-color-scheme` (sombre par défaut du système) ;
 *   - cibles tactiles ≥ 44 px (iPad, usage au doigt), pas de survol obligatoire.
 * =========================================================================== */

.wfi {
  /* repli CLAIR : utilisé seulement si l'app ne définit pas --bg/--card/... */
  --wfi-bg: var(--bg, #f2f2f7);
  --wfi-card: var(--card, #ffffff);
  --wfi-txt: var(--txt, #1c1c1e);
  --wfi-txt2: var(--txt2, #8e8e93);
  --wfi-sep: var(--sep, rgba(60, 60, 67, .12));
  --wfi-blue: var(--blue, #007aff);
  --wfi-green: var(--green, #34c759);
  --wfi-red: var(--red, #ff3b30);
  --wfi-orange: var(--orange, #ff9500);
  --wfi-purple: var(--purple, #af52de);
  --wfi-r: var(--radius, 18px);
  --wfi-shadow: 0 1px 3px rgba(0, 0, 0, .07);
  --wfi-soft: rgba(0, 0, 0, .05);

  color: var(--wfi-txt);
  font-family: inherit;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* thème SOMBRE — repli quand l'app ne fournit pas ses variables */
@media (prefers-color-scheme: dark) {
  .wfi {
    --wfi-bg: var(--bg, #101014);
    --wfi-card: var(--card, #1c1c20);
    --wfi-txt: var(--txt, #f2f2f7);
    --wfi-txt2: var(--txt2, #9a9aa2);
    --wfi-sep: var(--sep, rgba(255, 255, 255, .14));
    --wfi-blue: var(--blue, #0a84ff);
    --wfi-green: var(--green, #30d158);
    --wfi-red: var(--red, #ff453a);
    --wfi-orange: var(--orange, #ff9f0a);
    --wfi-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    --wfi-soft: rgba(255, 255, 255, .07);
  }
}

/* l'app peut forcer un thème : on suit son attribut si elle en pose un */
:root[data-theme="dark"] .wfi {
  --wfi-bg: var(--bg, #101014);
  --wfi-card: var(--card, #1c1c20);
  --wfi-txt: var(--txt, #f2f2f7);
  --wfi-txt2: var(--txt2, #9a9aa2);
  --wfi-sep: var(--sep, rgba(255, 255, 255, .14));
  --wfi-soft: rgba(255, 255, 255, .07);
  --wfi-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
:root[data-theme="light"] .wfi {
  --wfi-bg: var(--bg, #f2f2f7);
  --wfi-card: var(--card, #ffffff);
  --wfi-txt: var(--txt, #1c1c1e);
  --wfi-txt2: var(--txt2, #8e8e93);
  --wfi-sep: var(--sep, rgba(60, 60, 67, .12));
  --wfi-soft: rgba(0, 0, 0, .05);
  --wfi-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}

.wfi * { box-sizing: border-box; }

/* ------------------------------------------------------------------ entête */
.wfi-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.wfi-ttl { font-size: 17px; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.wfi-sub {
  font-size: 13px; color: var(--wfi-txt2); flex: 1 1 100%;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.wfi-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; padding: 1px 6px; border-radius: 6px;
  background: var(--wfi-soft); color: var(--wfi-txt);
}

/* segments (Champ / Expression — Tous / Échecs) */
.wfi-seg {
  display: flex; gap: 2px; padding: 2px; border-radius: 12px;
  background: var(--wfi-soft); flex: 0 0 auto;
}
.wfi-segb {
  min-height: 40px; padding: 8px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--wfi-txt2);
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
.wfi-segb.on { background: var(--wfi-card); color: var(--wfi-txt); box-shadow: var(--wfi-shadow); }

/* ------------------------------------------------------- corps du panneau */
.wfi-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wfi-lbl {
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--wfi-txt2);
}
.wfi-input {
  width: 100%; min-height: 46px; border: 1.5px solid var(--wfi-sep);
  background: var(--wfi-card); color: var(--wfi-txt);
  border-radius: 12px; padding: 11px 13px; font-size: 16px; /* 16px = pas de zoom iOS */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical; line-height: 1.45;
}
.wfi-input:focus { outline: 2px solid var(--wfi-blue); outline-offset: 1px; border-color: transparent; }
.wfi-input[readonly] { background: var(--wfi-soft); }
.wfi-hint { font-size: 12.5px; color: var(--wfi-txt2); line-height: 1.4; }

/* aperçu du rendu */
.wfi-prev {
  background: var(--wfi-card); border-radius: 12px; padding: 10px 13px;
  border-left: 4px solid var(--wfi-green); box-shadow: var(--wfi-shadow);
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.wfi-prev.wfi-empty { border-left-color: var(--wfi-txt2); }
.wfi-prev-t {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--wfi-txt2);
}
.wfi-prev-v { font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

/* pastilles de filtre */
.wfi-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.wfi-chip {
  flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border-radius: 20px;
  background: var(--wfi-card); border: 1px solid var(--wfi-sep);
  color: var(--wfi-blue); font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.wfi-chip:active { background: var(--wfi-soft); }

/* recherche */
.wfi-search { display: flex; align-items: center; gap: 6px; }
.wfi-sin {
  flex: 1 1 auto; min-height: 46px; border: 1.5px solid var(--wfi-sep);
  background: var(--wfi-card); color: var(--wfi-txt);
  border-radius: 12px; padding: 10px 13px; font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.wfi-sin:focus { outline: 2px solid var(--wfi-blue); outline-offset: 1px; border-color: transparent; }
.wfi-sx {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  background: var(--wfi-soft); color: var(--wfi-txt2); font-size: 16px;
  border: 0; cursor: pointer;
}
.wfi-count { font-size: 12px; color: var(--wfi-txt2); }

/* --------------------------------------------- liste des champs mappables */
.wfi-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding-right: 2px;
}
.wfi-grp {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--wfi-txt2); padding: 12px 4px 4px;
  position: sticky; top: 0; background: var(--wfi-bg); z-index: 1;
}
.wfi-fld {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  min-height: 48px; text-align: left; padding: 9px 12px; border: 0;
  border-radius: 12px; background: var(--wfi-card); color: var(--wfi-txt);
  box-shadow: var(--wfi-shadow); cursor: pointer;
}
.wfi-fld:active { background: var(--wfi-soft); }
.wfi-fld:focus-visible { outline: 2px solid var(--wfi-blue); outline-offset: 2px; }
.wfi-fld-r { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wfi-fld-t { font-size: 14.5px; font-weight: 600; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfi-fld-p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--wfi-blue); flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
}
.wfi-fld-s {
  font-size: 12.5px; color: var(--wfi-txt2); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wfi-none {
  text-align: center; color: var(--wfi-txt2); font-size: 14px;
  padding: 26px 12px; background: var(--wfi-card); border-radius: 12px;
}

/* --------------------------------------------------------- historique -----*/
.wfi-runs { display: flex; flex-direction: column; gap: 8px;
  max-height: min(64vh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.wfi-run { background: var(--wfi-card); border-radius: 14px; box-shadow: var(--wfi-shadow); overflow: hidden; }
.wfi-run-h, .wfi-nd-h {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 52px; padding: 10px 13px; border: 0; background: transparent;
  color: var(--wfi-txt); text-align: left; cursor: pointer;
}
.wfi-run-h:active, .wfi-nd-h:active { background: var(--wfi-soft); }
.wfi-run-h:focus-visible, .wfi-nd-h:focus-visible { outline: 2px solid var(--wfi-blue); outline-offset: -2px; }
.wfi-run-m, .wfi-nd-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wfi-run-t, .wfi-nd-t { font-size: 14.5px; font-weight: 600; display: flex; align-items: center;
  gap: 2px; flex-wrap: wrap; }
.wfi-run-s, .wfi-nd-d { font-size: 12.5px; color: var(--wfi-txt2); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; }
.wfi-run-r, .wfi-nd-r { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.wfi-sep { color: var(--wfi-txt2); }
.wfi-who { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.wfi-ms { font-size: 12px; color: var(--wfi-txt2); font-variant-numeric: tabular-nums; }
.wfi-caret { font-size: 13px; color: var(--wfi-txt2); transition: transform .18s ease; }
.wfi-run.open > .wfi-run-h .wfi-caret, .wfi-nd.open > .wfi-nd-h .wfi-caret { transform: rotate(180deg); }
.wfi-run-b { border-top: 1px solid var(--wfi-sep); padding: 6px 8px 10px;
  display: flex; flex-direction: column; gap: 6px; }

.wfi-nd { background: var(--wfi-bg); border-radius: 12px; overflow: hidden; }
.wfi-nd-b { border-top: 1px solid var(--wfi-sep); padding: 8px 12px 10px;
  display: flex; flex-direction: column; gap: 8px; }
.wfi-io { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wfi-io-t { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--wfi-txt2); }
.wfi-pre {
  margin: 0; padding: 9px 11px; border-radius: 10px; background: var(--wfi-card);
  border: 1px solid var(--wfi-sep); color: var(--wfi-txt);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.45; max-height: 220px;
  overflow: auto; overscroll-behavior: contain; white-space: pre-wrap; word-break: break-word;
}
.wfi-io-meta { font-size: 11.5px; color: var(--wfi-txt2); }

/* pastilles de statut */
.wfi-badge {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; padding: 4px 9px;
  border-radius: 8px; text-transform: uppercase; letter-spacing: .3px;
  background: var(--wfi-soft); color: var(--wfi-txt2); white-space: nowrap;
}
.wfi-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: var(--wfi-txt2); display: inline-block; }
.wfi-badge.wfi-ok, .wfi-dot.wfi-ok { background: color-mix(in srgb, var(--wfi-green) 22%, transparent); color: var(--wfi-green); }
.wfi-dot.wfi-ok { background: var(--wfi-green); }
.wfi-badge.wfi-ko, .wfi-dot.wfi-ko { background: color-mix(in srgb, var(--wfi-red) 22%, transparent); color: var(--wfi-red); }
.wfi-dot.wfi-ko { background: var(--wfi-red); }
.wfi-badge.wfi-wa { background: color-mix(in srgb, var(--wfi-orange) 22%, transparent); color: var(--wfi-orange); }
.wfi-dot.wfi-wa { background: var(--wfi-orange); }
.wfi-badge.wfi-si { background: color-mix(in srgb, var(--wfi-blue) 18%, transparent); color: var(--wfi-blue); }
.wfi-dot.wfi-si { background: var(--wfi-blue); }
.wfi-badge.wfi-st { background: color-mix(in srgb, var(--wfi-purple, #af52de) 20%, transparent); color: var(--wfi-purple, #af52de); }
.wfi-dot.wfi-st { background: var(--wfi-purple, #af52de); }
.wfi-port {
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 8px;
  background: var(--wfi-soft); color: var(--wfi-txt2); white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------- écran large */
@media (min-width: 900px) {
  .wfi-map .wfi-list { max-height: 380px; }
  .wfi-fld-r { align-items: center; }
}

/* accessibilité : respecter la préférence « moins d'animations » */
@media (prefers-reduced-motion: reduce) {
  .wfi-caret { transition: none; }
}