/* Copy-as-n8n: builder dialog, basket, paste-back, binding strip (frontend/js/core/n8n-ui.js).
   Uses the colour tokens defined in styles.css (--surface, --fg, --accent, …), so it
   follows the light/dark scheme automatically. */

.n8n-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.n8n-strip-status { flex: 1 1 320px; min-width: 0; }
.n8n-strip-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.n8n-binding-dot.is-warn { background: var(--warn, #8a6d3b); }

.n8n-modal-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--scrim);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.n8n-modal {
  background: var(--surface, #fff); color: var(--fg, #333);
  border: 1px solid var(--border, #dcdce6); border-radius: 14px;
  box-shadow: var(--shadow-lg);
  width: min(560px, 100%); max-width: 100%;
}
.n8n-modal.is-wide { width: min(860px, 100%); }
.n8n-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--border, #dcdce6);
}
.n8n-modal-head h3 { margin: 0; font-size: 16px; font-weight: 650; }
.n8n-modal-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.n8n-modal-body .form-group { margin: 0; }
.n8n-modal-body input[type="text"], .n8n-modal-body input[type="number"], .n8n-modal-body select {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px;
  border: 1px solid var(--border-strong, #c9ced8); border-radius: 8px;
  background: var(--surface, #fff); color: var(--fg, #333); font: inherit;
}
.n8n-modal-body input:disabled { opacity: 0.55; }

.n8n-builder-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.n8n-builder-head code { word-break: break-all; }
.n8n-auth-line { font-size: 0.9rem; }

.n8n-muted { color: var(--fg-muted, #666); font-size: 0.85rem; margin: 0; }
.n8n-warn {
  background: var(--warn-soft, #fff8ec); color: var(--warn, #8a6d3b);
  border-radius: 6px; padding: 6px 10px; font-size: 0.85rem; margin: 4px 0 0;
}
.n8n-error {
  background: var(--danger-soft, #fdecea); color: var(--danger, #c0392b);
  border-radius: 6px; padding: 6px 10px; font-size: 0.85rem;
}
.n8n-tag {
  display: inline-block; font-size: 0.72rem; padding: 1px 6px; border-radius: 10px;
  background: var(--surface-3, #eef0f6); color: var(--fg-muted, #666); vertical-align: middle;
}
.n8n-tag.is-warn { background: var(--warn-soft, #fff8ec); color: var(--warn, #8a6d3b); }

.n8n-details { border: 1px solid var(--border, #dcdce6); border-radius: 8px; padding: 6px 10px; }
.n8n-details > summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.n8n-details[open] > summary { margin-bottom: 8px; }
.n8n-fieldset { border: 1px solid var(--border, #dcdce6); border-radius: 8px; padding: 6px 10px 10px; margin: 0; }
.n8n-fieldset legend { font-weight: 600; font-size: 0.9rem; padding: 0 4px; }

.n8n-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; align-items: end; }
.n8n-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; }
.n8n-grid label.n8n-inline, .n8n-inline { flex-direction: row; align-items: center; gap: 6px; font-size: 0.85rem; }
.n8n-toggles { align-items: center; }

.n8n-expr-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.n8n-expr-table th, .n8n-expr-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border, #dcdce6); vertical-align: middle; }
.n8n-expr-table th { color: var(--fg-muted, #666); font-weight: 600; }
.n8n-expr-table tr.is-needed td { background: var(--warn-soft, #fff8ec); }
.n8n-expr-table td:first-child { width: 28px; }
.n8n-expr-table .n8n-val { color: var(--fg-muted, #666); word-break: break-all; }
.n8n-expr-table input[type="text"] { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.8rem; }

.n8n-setup-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.n8n-setup-table th { text-align: left; width: 38%; color: var(--fg-muted, #666); font-weight: 600; padding: 3px 6px 3px 0; vertical-align: top; }
.n8n-setup-table td { padding: 3px 0; word-break: break-all; }

.n8n-json {
  width: 100%; box-sizing: border-box; min-height: 180px;
  max-height: 360px; overflow: auto; margin: 0;
  background: var(--code-bg, #f0f0f6); color: var(--fg, #333);
  border: 1px solid var(--border, #dcdce6); border-radius: 6px; padding: 8px;
  font: 0.78rem/1.4 ui-monospace, "SFMono-Regular", Menlo, monospace; white-space: pre;
}
textarea.n8n-json { resize: vertical; }

.n8n-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.n8n-actions a.btn-mini { text-decoration: none; }

.n8n-basket { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.n8n-basket-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
  border: 1px solid var(--border, #dcdce6); border-radius: 8px; padding: 6px 8px;
}
.n8n-basket-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.n8n-basket-main code { font-size: 0.78rem; word-break: break-all; }
.n8n-step {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft, #eef0ff); color: var(--accent, #667eea); font-size: 0.78rem; font-weight: 700;
}
.n8n-basket-btns { display: flex; gap: 2px; }

.ws-bind-hint { font-size: 0.8rem; color: var(--fg-muted, #666); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

@media (max-width: 600px) {
  .n8n-modal-backdrop { padding: 12px 8px; }
  .n8n-basket-row { grid-template-columns: 24px minmax(0, 1fr); }
  .n8n-basket-row > label, .n8n-basket-btns { grid-column: 2; }
  .n8n-expr-table thead { display: none; }
  .n8n-expr-table tr { display: grid; grid-template-columns: 28px 1fr; }
  .n8n-expr-table td { border: 0; }
  .n8n-expr-table td:nth-child(3), .n8n-expr-table td:nth-child(4) { grid-column: 2; }
}

/* credential picker */
.n8n-pick-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.n8n-pick-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border, #d9dce3); border-radius: 8px; cursor: pointer; }
.n8n-pick-row:has(input:checked) { border-color: var(--accent, #667eea); }