/* AutoSync — Integrations module (marketplace, API & webhooks, platform integrations) */
.int-toolbar { border-bottom: 0; gap: .75rem; }
.int-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.int-chip { border: 1px solid var(--as-border); background: var(--as-surface); color: var(--as-text); border-radius: 999px; padding: .22rem .7rem; font-size: .76rem; font-weight: 600; line-height: 1.4; display: inline-flex; align-items: center; gap: .35rem; transition: background .12s, border-color .12s; }
.int-chip span { color: var(--as-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.int-chip:hover { border-color: var(--as-border-strong); background: var(--as-surface-2); }
.int-chip.active { background: var(--as-primary-50); border-color: #9EC5EE; color: var(--as-primary-700); }
.int-chip.active span { color: var(--as-primary); }

.int-section + .int-section { margin-top: 1.4rem; }
.int-section-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--as-muted); margin: 0 0 .6rem; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .85rem; }
.int-card { position: relative; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 10px; padding: 1rem 1rem .8rem; display: flex; flex-direction: column; gap: .6rem; box-shadow: var(--as-shadow-sm); transition: box-shadow .15s, border-color .15s, transform .15s; }
.int-card:hover { box-shadow: var(--as-shadow); border-color: var(--as-border-strong); }
.int-card.int-connected { border-top: 3px solid var(--as-success); padding-top: calc(1rem - 2px); }
.int-card.int-error { border-top: 3px solid var(--as-danger); padding-top: calc(1rem - 2px); }
.int-card.int-pending { border-top: 3px solid var(--as-warning); padding-top: calc(1rem - 2px); }
.int-card.int-focus { box-shadow: 0 0 0 3px rgba(25,118,210,.35); }
.int-card-top { display: flex; align-items: flex-start; gap: .75rem; }
.int-logo { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(145deg, #EEF4FB, #DCE9F7); color: var(--as-primary-700); font-size: 1.25rem; border: 1px solid #D5E3F3; overflow: hidden; }
.int-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 5px; }
.int-logo.sm { width: 38px; height: 38px; flex-basis: 38px; font-size: 1.1rem; }
.int-name { font-size: .95rem; font-weight: 650; color: var(--as-ink); margin: 0 0 .1rem; line-height: 1.25; }
.int-meta { font-size: .72rem; color: var(--as-muted); }
.int-status { flex-shrink: 0; }
.int-desc { font-size: .8rem; color: var(--as-text); margin: 0; line-height: 1.45; flex-grow: 1; }
.int-note { display: flex; gap: .4rem; align-items: flex-start; font-size: .74rem; color: var(--as-muted); background: var(--as-surface-2); border: 1px solid #EEF2F6; border-radius: 6px; padding: .35rem .5rem; }
.int-note.err { color: #991B1B; background: var(--as-danger-bg); border-color: #F8CACA; }
.int-note i { margin-top: 1px; }
.int-actions { display: flex; align-items: center; gap: .35rem; padding-top: .55rem; border-top: 1px solid #EEF2F6; margin-top: .1rem; }
.int-modal-head { display: flex; gap: .75rem; align-items: center; padding-bottom: .85rem; margin-bottom: .9rem; border-bottom: 1px solid var(--as-border); }
.int-notes { background: #F7FAFE; border: 1px solid #DCE8F6; border-radius: 8px; padding: .6rem .75rem; }
.int-notes li { overflow-wrap: anywhere; margin-bottom: .15rem; }

/* API & webhooks */
.api-scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: .15rem .75rem; max-height: 240px; overflow: auto; border: 1px solid var(--as-border); border-radius: 6px; padding: .5rem .7rem; background: var(--as-surface-2); }
.api-scopes .form-check { margin: 0; font-size: .8rem; }
.api-scopes .form-check-label { font-family: var(--as-mono); font-size: .76rem; }
.api-scope-tags { display: flex; flex-wrap: wrap; gap: .2rem; }
.api-scope-tags code { font-size: .68rem; background: var(--as-surface-2); border: 1px solid var(--as-border); border-radius: 4px; padding: 0 .3rem; color: #334155; }
.api-key-prefix { font-family: var(--as-mono); font-size: .78rem; background: #0F172A; color: #CBD5E1; border-radius: 4px; padding: .05rem .4rem; }
.api-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; background: var(--as-subtle); }
.api-status-dot.ok { background: var(--as-success); }
.api-status-dot.bad { background: var(--as-danger); }
.api-status-dot.warn { background: var(--as-warning); }
.api-http { font-family: var(--as-mono); font-size: .75rem; font-weight: 700; }
.api-http.s2 { color: var(--as-success); }
.api-http.s4 { color: var(--as-warning); }
.api-http.s5 { color: var(--as-danger); }
.api-code { background: #0F172A; color: #CBD5E1; font-family: var(--as-mono); font-size: .75rem; border-radius: 8px; padding: .8rem .9rem; white-space: pre-wrap; word-break: break-word; max-height: 380px; overflow: auto; margin: 0; }
.api-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .1rem .75rem; border: 1px solid var(--as-border); border-radius: 6px; padding: .5rem .7rem; max-height: 260px; overflow: auto; background: var(--as-surface-2); }
.api-events .form-check-label { font-family: var(--as-mono); font-size: .76rem; }
.api-docs-nav { position: sticky; top: calc(var(--as-topbar-h) + 1rem); max-height: calc(100vh - var(--as-topbar-h) - 2rem); overflow: auto; }
.api-docs-nav a { display: block; font-size: .78rem; padding: .22rem .5rem; border-radius: 5px; color: var(--as-text); }
.api-docs-nav a:hover { background: var(--as-primary-50); text-decoration: none; }
.api-docs-nav .grp { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--as-muted); font-weight: 700; margin: .8rem .5rem .2rem; }
.api-op { border: 1px solid var(--as-border); border-radius: 8px; margin-bottom: .6rem; background: var(--as-surface); }
.api-op-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; cursor: pointer; }
.api-op-head .path { font-family: var(--as-mono); font-size: .8rem; font-weight: 600; color: var(--as-ink); }
.api-op-head .sum { font-size: .78rem; color: var(--as-muted); margin-left: auto; text-align: right; }
.api-op-body { border-top: 1px solid var(--as-border); padding: .75rem .9rem; font-size: .8rem; }
.api-method { font-family: var(--as-mono); font-size: .68rem; font-weight: 800; border-radius: 4px; padding: .1rem .4rem; min-width: 52px; text-align: center; color: #fff; }
.api-method.get { background: #1976D2; } .api-method.post { background: #16A34A; } .api-method.patch, .api-method.put { background: #D97706; } .api-method.delete { background: #DC2626; }

/* Platform */
.pa-int-plans { display: flex; gap: .25rem; flex-wrap: wrap; }
.pa-json { font-family: var(--as-mono); font-size: .76rem; min-height: 170px; }
.pa-bar { height: 6px; border-radius: 3px; background: #E2E8F0; overflow: hidden; min-width: 80px; }
.pa-bar > span { display: block; height: 100%; background: var(--as-success); }
.pa-bar.bad > span { background: var(--as-danger); }
.pa-org-results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 260px; overflow: auto; background: #fff; border: 1px solid var(--as-border); border-radius: 6px; box-shadow: var(--as-shadow-lg); }

@media (max-width: 575.98px) {
  .int-grid { grid-template-columns: 1fr; }
  .int-toolbar .as-search-inline { max-width: none; }
  .api-op-head .sum { display: none; }
}
.int-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .int-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }