/**
 * integrations.css — Integration Hub UI v1.0
 * Connector catalog, credential forms, event logs. Namespace: .ig-
 */

:root {
  --ig-blue:    #3B82F6;
  --ig-green:   #10B981;
  --ig-amber:   #F59E0B;
  --ig-red:     #EF4444;
  --ig-purple:  #8B5CF6;
  --ig-surface: #fff;
  --ig-border:  #E5E7EB;
  --ig-sub:     #6B7280;
  --ig-radius:  12px;
}

/* ══════════════════════════════════════════════
   1. LAYOUT
══════════════════════════════════════════════ */
.ig-section { padding: 0; }
.ig-header {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 0 14px; flex-wrap: wrap;
}
.ig-header__title { font-size: 18px; font-weight: 900; flex: 1; display:flex;align-items:center;gap:8px; }

.ig-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ig-border); margin-bottom: 18px; }
.ig-tab {
  padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--ig-sub);
  border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s;
}
.ig-tab:hover { color: #1F2937; }
.ig-tab.active { color: var(--ig-blue); border-bottom-color: var(--ig-blue); }

/* ══════════════════════════════════════════════
   2. CONNECTOR CARDS (catalog view)
══════════════════════════════════════════════ */
.ig-cat-hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ig-sub); margin: 18px 0 10px;
}

.ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }

.ig-card {
  background: var(--ig-surface); border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius); padding: 18px; transition: all .13s;
  cursor: pointer; position: relative;
}
.ig-card:hover { border-color: #DBEAFE; box-shadow: 0 2px 12px rgba(59,130,246,.06); }
.ig-card.active { border-color: var(--ig-green); }

.ig-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ig-card__icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: #F9FAFB; display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.ig-card__title { font-size: 14px; font-weight: 800; color: #1F2937; }
.ig-card__desc  { font-size: 12px; color: var(--ig-sub); line-height: 1.4; }

.ig-card__footer {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid #F3F4F6;
}

/* Status badge */
.ig-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 800;
  text-transform: uppercase;
}
.ig-badge--ok        { background: rgba(16,185,129,.08); color: var(--ig-green); }
.ig-badge--degraded  { background: rgba(245,158,11,.08); color: var(--ig-amber); }
.ig-badge--down      { background: rgba(239,68,68,.08);  color: var(--ig-red); }
.ig-badge--unchecked { background: #F3F4F6; color: var(--ig-sub); }
.ig-badge--active    { background: rgba(16,185,129,.08); color: var(--ig-green); }
.ig-badge--inactive  { background: #F3F4F6; color: var(--ig-sub); }

/* ══════════════════════════════════════════════
   3. DETAIL / CONFIG MODAL
══════════════════════════════════════════════ */
.ig-modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.45); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.ig-modal-backdrop.open { display: flex; }

.ig-modal {
  background: #fff; border-radius: 18px; width: 560px; max-width: 96vw;
  max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
  animation: igSlide .25s ease;
}
.ig-modal__hdr {
  padding: 18px 24px; border-bottom: 1px solid var(--ig-border);
  display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 15px;
}
.ig-modal__close {
  margin-left: auto; width: 32px; height: 32px; border-radius: 8px;
  border: none; background: #F3F4F6; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.ig-modal__close:hover { background: #E5E7EB; }
.ig-modal__body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.ig-modal__footer {
  padding: 14px 24px; border-top: 1px solid var(--ig-border);
  display: flex; justify-content: space-between; gap: 8px;
}

@keyframes igSlide { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

/* ── Section separators ── */
.ig-section-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ig-sub); margin: 16px 0 8px;
}
.ig-section-label__badge {
  padding: 2px 6px; border-radius: 4px; font-size: 9px;
}
.ig-section-label__badge--cred { background: #FEF3C7; color: #92400E; }
.ig-section-label__badge--cfg  { background: #DBEAFE; color: #1E40AF; }

/* ── Form fields ── */
.ig-field { margin-bottom: 10px; }
.ig-field label {
  display: block; font-size: 11px; font-weight: 700; color: #374151;
  margin-bottom: 3px;
}
.ig-input, .ig-select {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--ig-border); border-radius: 8px;
  font-size: 13px; color: #1F2937; outline: none;
  box-sizing: border-box; transition: border-color .12s;
}
.ig-input:focus, .ig-select:focus { border-color: var(--ig-blue); }
.ig-input--password { font-family: monospace; letter-spacing: 1px; }
.ig-input-hint {
  font-size: 10px; color: var(--ig-sub); margin-top: 2px;
}
.ig-masked {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: monospace; font-size: 12px; color: var(--ig-sub);
  background: #F9FAFB; padding: 4px 8px; border-radius: 6px;
}

/* ══════════════════════════════════════════════
   4. EVENT LOG
══════════════════════════════════════════════ */
.ig-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ig-log-table thead th {
  padding: 8px 10px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--ig-sub); border-bottom: 1px solid var(--ig-border);
  text-align: left; white-space: nowrap;
}
.ig-log-table tbody tr { border-bottom: 1px solid #F3F4F6; transition: background .1s; }
.ig-log-table tbody tr:hover { background: #FAFBFC; }
.ig-log-table td { padding: 8px 10px; vertical-align: middle; }

.ig-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 800;
}
.ig-status--success      { background:rgba(16,185,129,.08); color:var(--ig-green); }
.ig-status--failed       { background:rgba(239,68,68,.08);  color:var(--ig-red); }
.ig-status--retrying     { background:rgba(139,92,246,.08); color:var(--ig-purple); }
.ig-status--rate_limited { background:rgba(245,158,11,.08); color:var(--ig-amber); }

/* ══════════════════════════════════════════════
   5. HEALTH MONITOR
══════════════════════════════════════════════ */
.ig-health-list { display: flex; flex-direction: column; gap: 8px; }
.ig-health-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--ig-surface);
  border: 1px solid var(--ig-border); border-radius: var(--ig-radius);
}
.ig-health-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ig-health-dot--ok        { background: var(--ig-green); box-shadow: 0 0 6px rgba(16,185,129,.4); }
.ig-health-dot--degraded  { background: var(--ig-amber); box-shadow: 0 0 6px rgba(245,158,11,.4); }
.ig-health-dot--down      { background: var(--ig-red);   box-shadow: 0 0 6px rgba(239,68,68,.4); }
.ig-health-dot--unchecked { background: #D1D5DB; }
.ig-health-name { font-size: 13px; font-weight: 700; flex: 1; }
.ig-health-last { font-size: 11px; color: var(--ig-sub); }

/* ══════════════════════════════════════════════
   6. STATS
══════════════════════════════════════════════ */
.ig-stats { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.ig-stats__card {
  flex: 1; min-width: 130px; padding: 14px 16px;
  background: var(--ig-surface); border: 1px solid var(--ig-border);
  border-radius: var(--ig-radius);
}
.ig-stats__val { font-size: 24px; font-weight: 900; }
.ig-stats__label { font-size: 10px; font-weight: 700; color: var(--ig-sub); text-transform: uppercase; margin-top: 2px; }

/* ══════════════════════════════════════════════
   7. BUTTONS
══════════════════════════════════════════════ */
.ig-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: 8px;
  font-size: 13px; font-weight: 700; border: none; cursor: pointer; transition: all .13s;
}
.ig-btn--primary { background: var(--ig-blue); color: #fff; }
.ig-btn--primary:hover { background: #2563EB; }
.ig-btn--green   { background: var(--ig-green); color: #fff; }
.ig-btn--green:hover   { background: #059669; }
.ig-btn--ghost   { background: transparent; color: var(--ig-sub); border: 1px solid var(--ig-border); }
.ig-btn--ghost:hover   { color: #1F2937; border-color: #D1D5DB; }
.ig-btn--danger  { background: rgba(239,68,68,.08); color: var(--ig-red); border: 1px solid rgba(239,68,68,.15); }
.ig-btn--sm      { height: 30px; padding: 0 10px; font-size: 12px; }

/* ══════════════════════════════════════════════
   8. EMPTY / SKELETON
══════════════════════════════════════════════ */
.ig-skel { height: 80px; border-radius: var(--ig-radius); margin-bottom: 8px;
  background: linear-gradient(90deg,#F9FAFB 25%,#F3F4F6 50%,#F9FAFB 75%);
  background-size: 200% 100%; animation: igShim 1.4s infinite;
}
@keyframes igShim { 0%{background-position:200% 0}100%{background-position:-200% 0} }
.ig-empty { padding: 40px 20px; text-align: center; color: var(--ig-sub); }
.ig-empty__icon  { font-size: 32px; display: block; margin-bottom: 8px; }
.ig-empty__title { font-size: 14px; font-weight: 700; color: #1F2937; }

/* ══════════════════════════════════════════════
   9. SECURITY CHECKLIST
══════════════════════════════════════════════ */
.ig-security {
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--ig-radius);
  padding: 14px 18px; margin-bottom: 16px;
}
.ig-security__title { font-size: 12px; font-weight: 800; color: #92400E; margin-bottom: 8px; display:flex;align-items:center;gap:6px; }
.ig-security__item {
  font-size: 11px; color: #78350F; padding: 2px 0;
  display: flex; align-items: center; gap: 6px;
}
.ig-security__check { color: var(--ig-green); font-weight: 900; }

/* ══════════════════════════════════════════════
   10. RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:640px) {
  .ig-grid   { grid-template-columns: 1fr; }
  .ig-modal  { max-width: 100vw; border-radius: 14px; }
  .ig-stats  { flex-direction: column; }
}