/* Sorbet Webhooks : admin-specific components.
   Supplements static/dashboard.css (the shared v2 "Editorial Calm" brand —
   Space Grotesk + IBM Plex Mono, warm paper, navy ink, single pink accent),
   copied verbatim from sorbet/analytics. Everything here is written in that
   file's token language (--ink / --paper / --rule / --pink / --f-mono …) and
   scoped under .v2-root, so re-copying dashboard.css from analytics stays a
   drop-in. Nothing below redefines a token. */

/* — Form grid — */
.v2-root .ig-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.v2-root .ig-grid .ig-full { grid-column: 1 / -1; }
@media (max-width: 820px) { .v2-root .ig-grid { grid-template-columns: 1fr; } }
.v2-root .ig-field { display: flex; flex-direction: column; gap: 7px; }
.v2-root .ig-hint { font-family: var(--f-sans); font-size: 11px; color: var(--ink-3);
  font-weight: 400; letter-spacing: 0; text-transform: none; }
.v2-root .ig-label a { color: var(--pink); font-weight: 500; text-transform: none;
  letter-spacing: 0; font-family: var(--f-sans); font-size: 11px; }
.v2-root textarea.v2-input { min-height: 92px; resize: vertical;
  font-family: var(--f-mono); font-size: 12px; line-height: 1.55; }
/* Source/target-conditional fields. Hidden by default; JS sets an explicit
   display to reveal (clearing it would just fall back to this rule). */
.v2-root .src-only, .v2-root .tgt-only { display: none; }

/* — Filter/action row above a table — */
.v2-root .ig-filters { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 18px; }
.v2-root .ig-filters .ig-field { min-width: 190px; }
.v2-root .ig-filters .v2-input, .v2-root .ig-filters .v2-select { padding: 9px 12px; font-size: 13px; }
.v2-root .ig-filters.is-tight .ig-field { min-width: 110px; }

/* — Source / destination chips — */
.v2-root .ig-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap; }
.v2-root .ig-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rule-strong); flex-shrink: 0; }
.v2-root .ig-chip.src-wordpress::before { background: #5B8CFF; }
.v2-root .ig-chip.src-google_ads::before { background: var(--warn); }
.v2-root .ig-chip.src-meta_ads::before { background: #7D6CFF; }
.v2-root .ig-chip.src-wix::before { background: var(--teal); }
.v2-root .ig-chip.src-website::before { background: var(--ink-3); }
.v2-root .ig-chip.tgt-brevo::before { background: var(--success); }
.v2-root .ig-chip.tgt-sorbet::before { background: var(--pink); }
.v2-root .ig-arrow { color: var(--ink-3); font-family: var(--f-mono); margin: 0 3px; }

/* — Copyable URL row — */
.v2-root .ig-url { display: flex; gap: 7px; align-items: center; margin: 3px 0; }
.v2-root .ig-url-k { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }
.v2-root .ig-url code { background: var(--paper); border: 1px solid var(--rule);
  padding: 3px 8px; border-radius: 6px; max-width: 330px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-mono);
  font-size: 11.5px; color: var(--ink); }
.v2-root .ig-copy { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); padding: 3px 7px; border-radius: 5px;
  border: 1px solid transparent; transition: color .12s ease, border-color .12s ease; }
.v2-root .ig-copy:hover { color: var(--pink); border-color: var(--rule); }

/* — Table scroll container —
   Webhook URLs make these tables wider than the content column. They scroll
   inside their own card; the page itself must never scroll sideways. */
.v2-root .ig-tablewrap { overflow-x: auto; }
.v2-root .ig-tablewrap .v2-table { min-width: 620px; }
.v2-root .v2-content { overflow-x: hidden; }

/* Wide screens: the left rail is the nav, so the tab strip stays hidden.
   Declared BEFORE the media query below — same specificity, so source order is
   what decides, and a later `display:none` would otherwise always win. */
.v2-root .ig-nav-narrow { display: none; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.v2-root .ig-nav-narrow .ig-navbtn { font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px;
  border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-2);
  background: var(--surface); transition: border-color .12s ease, color .12s ease; }
.v2-root .ig-nav-narrow .ig-navbtn:hover { border-color: var(--ink-3); color: var(--ink); }
.v2-root .ig-nav-narrow .ig-navbtn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Narrow screens: give the content column its width back by collapsing the rail
   to icons (reusing dashboard.css's collapsed look). That hides the rail's
   links, so the tab strip above has to take over as the nav — without it there
   is no way to leave the Flows tab. */
@media (max-width: 1000px) {
  .v2-root .v2-left { width: 62px; }
  .v2-root .v2-left .v2-left-label, .v2-root .v2-left .v2-left-rows { display: none; }
  .v2-root .v2-left .v2-left-head { justify-content: center; padding: 0; }
  .v2-root .v2-left .v2-left-section { padding: 15px 0 0; margin: 15px 0; }
  .v2-root .v2-left .v2-left-section:first-of-type { margin-top: 0; padding-top: 0; }
  .v2-root .v2-pad { padding: 28px 20px 48px; }
  .v2-root .ig-nav-narrow { display: flex; }
  .v2-root .ig-grid { grid-template-columns: 1fr; }
}

/* — Row actions — */
.v2-root .ig-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-root .ig-mono { font-family: var(--f-mono); font-size: 11.5px; }
.v2-root .ig-muted { color: var(--ink-3); }
.v2-root .v2-table td .ig-sub { font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-3); margin-top: 4px; }

/* — Payload / code blocks — */
.v2-root .ig-payload { margin: 6px 0 0; max-width: 460px; white-space: pre-wrap;
  word-break: break-word; font-family: var(--f-mono); font-size: 11.5px;
  color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule);
  border-radius: 7px; padding: 10px 12px; }
.v2-root details > summary { cursor: pointer; font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; list-style: none; }
.v2-root details > summary::-webkit-details-marker { display: none; }
.v2-root details > summary::before { content: '+ '; color: var(--pink); }
.v2-root details[open] > summary::before { content: '– '; }
.v2-root details > summary:hover { color: var(--ink); }

/* — "Created" result box — */
.v2-root .ig-created { background: var(--paper); border: 1px solid var(--rule);
  border-left: 2px solid var(--pink); border-radius: 8px; padding: 16px 18px; margin-top: 18px; }
.v2-root .ig-created b { font-weight: 500; }

/* — Prose (Setup tab) — */
.v2-root .ig-prose { font-size: 13.5px; color: var(--ink-2); max-width: 78ch; }
.v2-root .ig-prose h3 { font-family: var(--f-sans); font-size: 15px; font-weight: 500;
  color: var(--ink); margin: 24px 0 6px; letter-spacing: -0.01em; }
.v2-root .ig-prose h3:first-child { margin-top: 0; }
.v2-root .ig-prose p { margin: 0 0 4px; }
.v2-root .ig-prose code { font-family: var(--f-mono); font-size: 12px; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; color: var(--ink); }
.v2-root .ig-prose b { color: var(--ink); font-weight: 500; }

/* — Signed-out gate — */
.v2-root .ig-gate { display: grid; place-items: center; min-height: 58vh; text-align: center; }
.v2-root .ig-gate-inner { max-width: 42ch; }
.v2-root .ig-gate h1 { font-family: var(--f-sans); font-size: 34px; font-weight: 500;
  letter-spacing: -0.025em; margin: 12px 0 10px; color: var(--ink); }
.v2-root .ig-gate h1 em { font-style: italic; font-weight: 400; color: var(--pink); }
.v2-root .ig-gate p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 22px; }

/* — Top-rail tenant tag — */
.v2-root .ig-tenant { font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

/* ── Field-map editor: two columns, one row per field ──────────────────────
   Replaces a raw JSON textarea. The JSON was the honest shape of the data but a
   hostile way to type it: one stray comma and the whole flow fails to save. */
.v2-root .ig-map { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.v2-root .ig-map-head, .v2-root .ig-map-row { display: grid;
  grid-template-columns: 1fr 24px 1fr 34px; align-items: center; gap: 8px;
  padding: 8px 10px; }
.v2-root .ig-map-head { background: var(--paper); border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-2); padding-top: 9px; padding-bottom: 9px; }
.v2-root .ig-map-row { border-bottom: 1px solid var(--rule); background: var(--surface); }
.v2-root .ig-map-row:last-child { border-bottom: 0; }
.v2-root .ig-map-row input, .v2-root .ig-map-row select {
  width: 100%; padding: 7px 10px; border: 1px solid transparent; border-radius: 6px;
  background: var(--paper); font-family: var(--f-mono); font-size: 12px;
  color: var(--ink); outline: none; transition: border-color .12s ease; }
.v2-root .ig-map-row input:focus, .v2-root .ig-map-row select:focus { border-color: var(--ink); background: var(--surface); }
.v2-root .ig-map-arrow { text-align: center; color: var(--ink-3); font-family: var(--f-mono); font-size: 12px; }
.v2-root .ig-map-rm { width: 26px; height: 26px; border-radius: 6px; color: var(--ink-3);
  font-size: 16px; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; transition: color .12s ease, background .12s ease; }
.v2-root .ig-map-rm:hover { color: var(--danger); background: var(--danger-light); }
.v2-root .ig-map-foot { display: flex; gap: 10px; align-items: center;
  padding: 9px 10px; background: var(--paper); border-top: 1px solid var(--rule); }
.v2-root .ig-map-add { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--pink); font-weight: 500; }
.v2-root .ig-map-add:hover { text-decoration: underline; }
.v2-root .ig-map-empty { padding: 14px 12px; color: var(--ink-3); font-size: 12.5px;
  background: var(--surface); }
.v2-root .ig-map-note { font-size: 11px; color: var(--ink-3); margin-left: auto; }
.v2-root .ig-map-row.is-email input:first-child { border-left: 2px solid var(--pink); border-radius: 6px; }
/* An invalid target is silently ignored at delivery, so it has to be loud here. */
.v2-root .ig-map-row.is-bad input[data-k="target"] { border-color: var(--danger); background: var(--danger-light); }
.v2-root .ig-map-bad { font-size: 11.5px; color: var(--danger); padding: 8px 10px;
  background: var(--danger-light); border-top: 1px solid var(--rule); }

/* — Connected-account picker — */
.v2-root .ig-acct-empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border: 1px dashed var(--rule-strong); border-radius: 8px;
  background: var(--paper); font-size: 12.5px; color: var(--ink-2); }
.v2-root .ig-acct-empty a { color: var(--pink); font-weight: 500; }
.v2-root .ig-warn { font-size: 12px; color: #9A6420; background: var(--warn-light);
  border: 1px solid rgba(217,145,58,0.28); border-radius: 6px; padding: 7px 10px;
  margin-top: 7px; }