/* ============================================================================
   integrations.css — tweaks specific to the Integrations Hub ONLY.
   No fonts/colors/global styles (core.css owns all tokens). Every class is
   namespaced .integrations-* and leans on palette tokens via var(--…).
   Houses: KPI sparks, the connection-card grid (logo tile + status + glow),
   the webhook table (endpoint glyphs + mini sparks) and the API-keys vault.
   ========================================================================== */

/* ── KPI tiles: keep the spark hugging the bottom ──────────────────────── */
.integrations-kpi{display:flex;flex-direction:column;gap:3px}
.integrations-kpi .spark{margin-top:11px}

/* ── section-title: trailing scope note (per-user vs company) ───────────── */
.integrations-section-note{font-family:var(--font-mono);font-size:9px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--text-faint);font-weight:500;margin-left:8px;
  border-left:1px solid var(--border);padding-left:8px}

/* ── PER-USER block: a touch of separation from the company grid ───────── */
.integrations-peoplehost .integrations-user-grid{margin-top:0}
.integrations-user-card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ig-acc) 5%,transparent),transparent 60%)}
.integrations-user-note{font-family:var(--font-mono);font-size:9px;letter-spacing:.4px;
  color:var(--text-faint);display:flex;align-items:center;gap:5px;margin-top:-4px}

/* ════ CONNECTION CARD GRID ════════════════════════════════════════════════ */
/* per-card accent: maps data-acc → an accent token used by the logo + glow.
   --ig-lift is a module-local hover drop-shadow derived from the --bg token so
   no raw colour leaks in (core.css owns the palette; we only reference tokens). */
.integrations-card{--ig-acc:var(--accent1);
  --ig-lift:0 10px 26px color-mix(in srgb,var(--bg) 62%,transparent)}
.integrations-card[data-acc="a2"]{--ig-acc:var(--accent2)}
.integrations-card[data-acc="a3"]{--ig-acc:var(--accent3)}

.integrations-card{
  display:flex;flex-direction:column;gap:11px;cursor:pointer;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.integrations-card:hover{border-color:var(--border-hi);transform:translateY(-2px);
  box-shadow:var(--ig-lift)}
.integrations-card:focus-visible{border-color:var(--ig-acc);outline:none}
/* connected cards get a faint live accent rail + glow */
.integrations-card.is-connected{box-shadow:inset 3px 0 0 -1px var(--ig-acc)}
.integrations-card.is-connected:hover{box-shadow:inset 3px 0 0 -1px var(--ig-acc),var(--ig-lift)}

.integrations-card-top{display:flex;align-items:flex-start;gap:11px}

/* the glyph/emoji logo tile */
.integrations-logo{
  width:42px;height:42px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:21px;
  background:var(--panel-hi);border:1px solid var(--border);position:relative;overflow:hidden;
}
.integrations-logo::after{content:'';position:absolute;inset:0;opacity:.14;
  background:radial-gradient(circle at 30% 20%,var(--ig-acc),transparent 70%)}
.integrations-card.is-connected .integrations-logo{
  border-color:color-mix(in srgb,var(--ig-acc) 40%,var(--border));
  box-shadow:0 0 16px color-mix(in srgb,var(--ig-acc) 22%,transparent)}

.integrations-card-id{flex:1;min-width:0}
.integrations-card-name{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.integrations-card-cat{font-family:var(--font-mono);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-faint);margin-top:3px}

/* "NOT CONNECTED" muted pill (distinct from the .ok/.warn variants) */
.integrations-pill-off{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);
  font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:20px;
  border:1px dashed var(--border-hi);color:var(--text-faint);background:transparent;white-space:nowrap}

.integrations-card-powers{font-size:12px;color:var(--text-muted);line-height:1.45;flex:1}

.integrations-card-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto}
/* company cards can pair a "Open ▸" deep-link with the connect/disconnect btn */
.integrations-card-cta{display:flex;gap:7px;align-items:stretch}
.integrations-card-cta .btn-block{flex:1}
.integrations-link-btn{flex:none;white-space:nowrap}
.integrations-card-meta{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-faint);
  font-family:var(--font-mono);letter-spacing:.3px;min-width:0;flex-wrap:wrap}
.integrations-card-meta>span:not(.integrations-meta-dot){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.integrations-meta-dot{width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--ig-acc);box-shadow:0 0 6px var(--ig-acc)}
.integrations-meta-dot.off{background:var(--text-faint);box-shadow:none}
.integrations-card-sync{color:var(--text-faint)}

/* ════ WEBHOOK HEALTH TABLE ════════════════════════════════════════════════ */
.integrations-table-wrap{overflow-x:auto}
.integrations-table-wrap .table{min-width:640px}
.integrations-ep{display:inline-flex;align-items:center;gap:8px;color:var(--text)}
.integrations-ep-glyph{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;
  background:var(--panel);border:1px solid var(--border);flex:none}
/* mini delivery spark sits inside the 7d cell */
.integrations-mini-spark{display:inline-block;width:78px;height:26px;vertical-align:middle}
.integrations-mini-spark .spark{height:26px}

.integrations-sumstats .stat-row{padding:7px 0}

/* ════ API KEYS VAULT ══════════════════════════════════════════════════════ */
.integrations-keylist{display:flex;flex-direction:column}
.integrations-key{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--border)}
.integrations-key:last-child{border-bottom:none}
.integrations-key-glyph{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:16px;background:var(--panel);border:1px solid var(--border)}
.integrations-key-body{flex:1;min-width:0}
.integrations-key-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px}
.integrations-key-svc{font-size:13px;font-weight:600;color:var(--text)}
.integrations-key-scope{font-family:var(--font-mono);font-size:9px;letter-spacing:.5px;color:var(--text-faint)}
.integrations-key-val{font-size:12px;letter-spacing:.5px;color:var(--text-muted);
  background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:5px 9px;display:inline-block;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .18s var(--ease),border-color .18s var(--ease)}
.integrations-key.is-revealed .integrations-key-val{color:var(--accent1);border-color:var(--border-hi)}
.integrations-key-side{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.integrations-key-actions{display:flex;gap:6px}

/* ════ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .integrations-grid.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .integrations-grid.cols-4{grid-template-columns:1fr}
  .integrations-user-grid.cols-2{grid-template-columns:1fr}
  .integrations-key{flex-wrap:wrap}
  .integrations-key-side{flex-direction:row;align-items:center;width:100%;justify-content:space-between;margin-top:4px}
  .integrations-section-note{display:block;margin-left:0;border-left:none;padding-left:0;margin-top:3px}
}