/* integrations.css — Integrations admin page.
   Scoped under .intg-* so nothing here can reach another module's markup. */

.intg-page { padding: 0 4px 48px; max-width: 1400px; }
/* The page title and Refresh live in the header band (forge-page.js), not here. */

/* ── status line ───────────────────────────────────────────── */
.intg-status {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 14px;
  font-size: 13px; background: var(--surface-2, #f4f5f7);
}
.intg-status-error { background: #fdecec; color: #a11; border: 1px solid #f3bcbc; }
.intg-status-ok { background: #eaf7ee; color: #1a6b34; border: 1px solid #b9e2c6; }

.intg-statusbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 8px;
  background: var(--surface-2, #f4f5f7); border: 1px solid var(--border, #e2e4e9);
}
.intg-hint {
  margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; font-size: 13px;
  background: #fff8e6; border: 1px solid #f0dca8; color: #6b5310;
}
.intg-hint code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }

/* ── pills & chips ─────────────────────────────────────────── */
/* The kit's chip (.fk-chip in forge-kit.css). A bare pill is a label ("env: dev"), so it
   is plain; a toned pill is a state and carries the kit's dot. */
.intg-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui); font-size: var(--fk-type-xs); font-weight: 600; line-height: 1; white-space: nowrap;
  color: var(--fk-parked); background: var(--fk-parked-bg); box-shadow: inset 0 0 0 1px var(--fk-parked-line);
}
.intg-pill:is(.intg-pill-ok, .intg-pill-warn, .intg-pill-off)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.intg-pill-ok { color: var(--fk-done); background: var(--fk-done-bg); box-shadow: inset 0 0 0 1px var(--fk-done-line); }
.intg-pill-warn { color: var(--fk-attention); background: var(--fk-attention-bg); box-shadow: inset 0 0 0 1px var(--fk-attention-line); }
.intg-pill-off { color: var(--fk-parked); background: var(--fk-parked-bg); box-shadow: inset 0 0 0 1px var(--fk-parked-line); }

.intg-chip {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px;
  border-radius: 6px; font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface-3, #eef0f4); color: var(--text-2, #48505f);
}
/* rate-intel:read carries a licence obligation — it should not look ordinary. */
.intg-chip-warn { background: #fdf0d8; color: #8a5a00; font-weight: 600; }

/* ── sections ──────────────────────────────────────────────── */
.intg-section { margin-top: 28px; }
.intg-section-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e2e4e9);
}
.intg-section-head h2 { margin: 0; font-size: 15px; font-weight: 650; }

/* ── forms ─────────────────────────────────────────────────── */
.intg-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px; border-radius: 10px; margin-bottom: 14px;
  background: var(--surface-2, #f7f8fa); border: 1px solid var(--border, #e6e8ec);
}
.intg-form input[type="text"], .intg-form input[type="url"], .intg-form select {
  padding: 7px 10px; border-radius: 7px; font-size: 13px;
  border: 1px solid var(--border, #d6d9e0); background: var(--surface, #fff);
  min-width: 180px;
}
.intg-form input:focus, .intg-form select:focus {
  outline: 2px solid var(--accent, #3b6ef0); outline-offset: -1px;
}

.intg-scopes { display: flex; flex-wrap: wrap; gap: 4px 14px; width: 100%; margin: 4px 0; }
.intg-scope {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.intg-scope-warn { color: #8a5a00; font-weight: 600; }
.intg-scope-note {
  font-family: inherit; font-weight: 400; font-size: 11px;
  color: #8a5a00; opacity: .85; margin-left: 4px;
}

/* ── customer export ───────────────────────────────────────── */
.intg-export {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 12px; border-radius: 10px;
  background: var(--surface-2, #f7f8fa); border: 1px solid var(--border, #e6e8ec);
}
.intg-export-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-2, #5b6472);
}
.intg-export-note {
  width: 100%; margin: 0; font-size: 11.5px; line-height: 1.5;
  color: var(--text-3, #78808f);
}
.intg-export-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  padding: 1px 4px; border-radius: 4px; background: var(--surface-3, #eef0f4);
}

/* ── buttons ───────────────────────────────────────────────── */
/* The kit's buttons ("One FORGE look" step 3): ARL blue, not this page's own blue; the ghost
   button is the kit's white secondary, the danger one its red outline. */
.intg-btn {
  padding: 8px 14px; border-radius: var(--fk-radius-md); border: 1px solid transparent;
  font-family: var(--fk-font-ui); font-size: var(--fk-type-md); font-weight: 600; line-height: 1.25; cursor: pointer;
  background: var(--fk-blue-600); color: var(--fk-white);
}
.intg-btn:hover:not(:disabled) { background: var(--fk-blue-700); }
.intg-btn-sm { padding: 6px 11px; font-size: var(--fk-type-sm); }
.intg-btn-ghost { background: var(--fk-surface); color: var(--fk-ink); border-color: var(--fk-line); box-shadow: var(--fk-shadow-xs); }
.intg-btn-ghost:hover:not(:disabled) { background: var(--fk-canvas); }
.intg-btn-danger { background: var(--fk-surface); color: var(--fk-broken); border-color: var(--fk-broken-line); }
.intg-btn-danger:hover:not(:disabled) { background: var(--fk-broken-bg); }

/* ── tables ────────────────────────────────────────────────── */
.intg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.intg-table th {
  text-align: left; padding: 8px 10px; font-size: 11.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3, #78808f); border-bottom: 1px solid var(--border, #e2e4e9);
}
.intg-table td {
  padding: 10px; vertical-align: top;
  border-bottom: 1px solid var(--border-soft, #eef0f3);
}
.intg-table tr:hover td { background: var(--surface-2, #fafbfc); }
.intg-row-warn td { background: #fffaf0; }

.intg-actions { white-space: nowrap; }
.intg-actions .intg-btn { margin-left: 4px; }
.intg-actions .intg-btn:first-child { margin-left: 0; }

/* A target URL can be long; clamp rather than letting it blow the layout. */
.intg-url {
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}

.intg-meta { font-size: 11.5px; color: var(--text-3, #78808f); margin-top: 2px; }
.intg-muted { color: var(--text-3, #9aa1ad); }
.intg-err { color: #b3261e; }
.intg-warn { color: #8a5a00; }
.intg-empty {
  padding: 18px; text-align: center; font-size: 13px;
  color: var(--text-3, #78808f); background: var(--surface-2, #fafbfc);
  border-radius: 8px;
}
.intg-hint-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--surface-3, #eef0f4); padding: 2px 6px; border-radius: 5px;
}

/* ── one-time secret reveal ────────────────────────────────── */
/* Deliberately loud. The value exists once and cannot be retrieved. */
.intg-reveal-card {
  margin: 14px 0; padding: 16px; border-radius: 10px;
  background: #fffaf0; border: 2px solid #e8b84b;
}
.intg-reveal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.intg-reveal-title { font-weight: 650; font-size: 14px; color: #6b5310; }
.intg-reveal-warn { margin: 8px 0; font-size: 12.5px; color: #8a5a00; font-weight: 600; }
.intg-reveal-note { margin: 8px 0 0; font-size: 12px; color: #6b5310; }
.intg-reveal-value {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid #e8d9b0;
}
.intg-reveal-value code {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; word-break: break-all; user-select: all;
}