/* ============================================================
   FlowZen — API & Conexões: visual aprimorado
   CSS separado, carregado após admin.css.
   Escopo: somente .api-clean-page.
   Mantém as cores originais/brand do FlowZen.
   ============================================================ */

.api-clean-page .api-preview-card-tile {
  background: rgba(10, 8, 20, .98) !important;
  border: 1px solid rgba(174, 111, 240, .14) !important;
  border-radius: 12px !important;
  padding: 13px 12px 11px !important;
  min-height: 118px !important;
  box-shadow: none !important;
  transition: border-color .18s, background .18s, transform .13s !important;
}

.api-clean-page .api-preview-card-tile:hover {
  background: rgba(17, 12, 34, .98) !important;
  border-color: rgba(174, 111, 240, .46) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3) !important;
}

.api-clean-page .api-preview-card-tile.selected {
  background: rgba(20, 14, 38, .98) !important;
  border-color: rgba(174, 111, 240, .86) !important;
  box-shadow:
    0 0 0 1px rgba(217, 110, 234, .22),
    0 0 20px rgba(174, 111, 240, .13) !important;
}

.api-clean-page .api-preview-card-tile:active {
  transform: scale(.97) !important;
}

/* Logo box: tamanho/forma somente. As cores de marca ficam abaixo. */
.api-clean-page .api-card-logo {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Suporte ao novo JS com ícones internos */
.api-clean-page .api-card-logo .api-card-icon-wrap {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.api-clean-page .api-card-logo .api-card-icon {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
}

.api-clean-page .api-card-logo .api-card-icon svg {
  width: 21px !important;
  height: 21px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
}

.api-clean-page .api-card-logo .api-card-icon svg [fill="currentColor"] {
  fill: currentColor !important;
}

/* Remove resíduos de imagens/logos antigas quando o card usa ícone interno */
.api-clean-page .api-card-logo .api-logo-img,
.api-clean-page .api-card-logo .api-logo-fallback {
  display: none !important;
}

/* Tipografia */
.api-clean-page .api-preview-card-tile strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #e4dff5 !important;
  letter-spacing: -.01em !important;
  margin-top: 2px !important;
  display: block !important;
}

.api-clean-page .api-preview-card-tile em {
  font-size: 11px !important;
  color: #544972 !important;
  margin-top: 2px !important;
  display: block !important;
}

.api-clean-page .api-card-note {
  font-size: 10.5px !important;
  color: #6e6486 !important;
  margin-top: 3px !important;
  line-height: 1.3 !important;
}

/* Badge de status com dot */
.api-clean-page .api-mini-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 4px 9px !important;
  margin-top: 8px !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
}

.api-clean-page .api-mini-status i {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.api-clean-page .api-mini-status i::after {
  display: none !important;
}

.api-clean-page .api-mini-status.green  { background: rgba(74, 222, 128, .13) !important; color: #4ade80  !important; }
.api-clean-page .api-mini-status.yel    { background: rgba(251, 191, 36, .14) !important; color: #fbbf24  !important; }
.api-clean-page .api-mini-status.acc    { background: rgba(174, 111, 240, .17) !important; color: #d8b4fe !important; }
.api-clean-page .api-mini-status.danger { background: rgba(248, 113, 113, .14) !important; color: #f87171 !important; }
.api-clean-page .api-mini-status.muted  { background: rgba(148, 163, 184, .12) !important; color: #94a3b8 !important; }
.api-clean-page .api-mini-status.blue   { background: rgba(96,  165, 250, .14) !important; color: #60a5fa !important; }

/* Check de selecionado */
.api-clean-page .api-selected-check {
  right: 10px !important;
  top: 10px !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
  background: linear-gradient(135deg, #ae6ff0, #d96eea) !important;
  box-shadow: 0 0 14px rgba(174, 111, 240, .32) !important;
}

/* Grid */
.api-clean-page .api-preview-grid {
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)) !important;
  gap: 10px !important;
}

.api-clean-page .api-preview-grid.api-list-view .api-preview-card-tile {
  min-height: 68px !important;
  padding: 10px 12px !important;
}

.api-clean-page .api-preview-grid.api-list-view .api-card-logo {
  margin-bottom: 0 !important;
}

.api-clean-page .api-preview-left,
.api-clean-page .api-preview-detail {
  overflow: visible !important;
}

/* Filtros/chips */
.api-clean-page .api-preview-chip {
  height: 30px !important;
  padding: 0 13px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  border-color: rgba(174, 111, 240, .18) !important;
  color: #a8a0c0 !important;
}

.api-clean-page .api-preview-chip.active,
.api-clean-page .api-preview-chip:hover {
  background: linear-gradient(135deg, #ae6ff0, #8b50db 65%, #d96eea) !important;
  border-color: rgba(217, 110, 234, .4) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(174, 111, 240, .22) !important;
}

/* Cores originais/brand reforçadas */
.api-clean-page .api-card-logo.api-brand-whatsapp { background: linear-gradient(145deg,#4ade80,#16a34a) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-instagram { background: radial-gradient(circle at 27% 105%,#feda75 0 22%,transparent 23%),linear-gradient(135deg,#833ab4 0%,#c13584 35%,#fd1d1d 68%,#fcb045 100%) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-facebook { background: linear-gradient(145deg,#2563eb,#1d4ed8) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-webhooks { background: linear-gradient(145deg,#ae6ff0,#6d35d7) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-storage { background: linear-gradient(145deg,#60a5fa,#2563eb) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-email { background:#fff !important; color:#2563eb !important; }
.api-clean-page .api-card-logo.api-brand-google-calendar { background:#fff !important; color:#4285f4 !important; }
.api-clean-page .api-card-logo.api-brand-google-sheets { background:#fff !important; color:#16a34a !important; }
.api-clean-page .api-card-logo.api-brand-ai { background: linear-gradient(145deg,#20c997,#087f5b) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-payments { background: linear-gradient(145deg,#38bdf8,#0ea5e9) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-ecommerce { background: linear-gradient(145deg,#fb923c,#f97316) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-payt { background: linear-gradient(145deg,#36d399,#0f766e) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-braip { background: linear-gradient(145deg,#7c3aed,#4c1d95) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-ticto { background: linear-gradient(145deg,#2dd4bf,#0891b2) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-hotmart { background: linear-gradient(145deg,#ff6a2a,#9b2c16) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-perfectpay { background: linear-gradient(145deg,#fb7185,#be123c) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-kirvano { background: linear-gradient(145deg,#38bdf8,#6366f1) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-tracking-postback { background: linear-gradient(145deg,#f97316,#b45309) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-meta,
.api-clean-page .api-card-logo.api-brand-meta-conversions { background: linear-gradient(145deg,#2563eb,#06b6d4) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-logistics-hub { background: linear-gradient(145deg,#60a5fa,#1d4ed8) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-melhor-envio { background: linear-gradient(145deg,#22c55e,#3b82f6) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-kangu { background: linear-gradient(145deg,#ef4444,#f8fafc) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-jadlog { background: linear-gradient(145deg,#ef4444,#991b1b) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-correios { background: linear-gradient(145deg,#facc15,#2563eb) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-ifood { background: linear-gradient(145deg,#ef4444,#dc2626) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-sefaz { background: linear-gradient(145deg,#8b5cf6,#5b21b6) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-finance { background: linear-gradient(145deg,#65d66e,#16a34a) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-api-flowzen { background: linear-gradient(145deg,#ae6ff0,#6d35d7) !important; color:#fff !important; }
.api-clean-page .api-card-logo.api-brand-tiktok { background: linear-gradient(145deg,#111827,#020617) !important; color:#fff !important; }

/* Responsivo */
@media (max-width: 1380px) {
  .api-clean-page .api-preview-workspace {
    grid-template-columns: 1fr !important;
  }
  .api-clean-page .api-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .api-clean-page .api-preview-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .api-clean-page .api-preview-search-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .api-clean-page .api-preview-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   FlowZen — API & Conexões: paleta unificada FlowZen
   Objetivo: remover mistura de cores externas/marcas e deixar
   a aba inteira coerente com o projeto.
   Escopo: somente .api-clean-page.
   ============================================================ */

.api-clean-page {
  --fz-bg-deep: #08080b;
  --fz-card: rgba(10, 8, 20, .98);
  --fz-card-hover: rgba(18, 13, 34, .98);
  --fz-border: rgba(174, 111, 240, .18);
  --fz-border-hover: rgba(174, 111, 240, .42);
  --fz-purple: #ae6ff0;
  --fz-pink: #d96eea;
  --fz-green: #4ade80;
  --fz-text: #f4efff;
  --fz-muted: #8f83ad;
}

/* Área geral da aba */
.api-clean-page .api-preview-left,
.api-clean-page .api-preview-detail,
.api-clean-page .api-preview-workspace,
.api-clean-page .api-preview-page {
  color: var(--fz-text) !important;
}

/* Cards das integrações */
.api-clean-page .api-preview-card-tile {
  background:
    radial-gradient(circle at top left, rgba(174,111,240,.075), transparent 38%),
    linear-gradient(145deg, rgba(12,9,24,.98), rgba(7,7,13,.99)) !important;
  border: 1px solid rgba(174,111,240,.16) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 12px 30px rgba(0,0,0,.12) !important;
}

.api-clean-page .api-preview-card-tile:hover {
  background:
    radial-gradient(circle at top left, rgba(217,110,234,.105), transparent 42%),
    linear-gradient(145deg, rgba(17,12,34,.99), rgba(8,8,15,.99)) !important;
  border-color: rgba(174,111,240,.42) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    0 0 0 1px rgba(174,111,240,.08) !important;
}

.api-clean-page .api-preview-card-tile.selected {
  background:
    radial-gradient(circle at top left, rgba(174,111,240,.16), transparent 42%),
    linear-gradient(145deg, rgba(20,13,40,.99), rgba(8,8,16,.99)) !important;
  border-color: rgba(174,111,240,.88) !important;
  box-shadow:
    0 0 0 1px rgba(217,110,234,.22),
    0 0 26px rgba(174,111,240,.16),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Ícones: todos na identidade FlowZen, sem cores externas/marcas */
.api-clean-page .api-card-logo,
.api-clean-page .api-card-logo[class*="api-brand-"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.13), transparent 30%),
    linear-gradient(145deg, rgba(174,111,240,.95), rgba(110,56,215,.95) 62%, rgba(217,110,234,.72)) !important;
  color: #fff !important;
  border: 1px solid rgba(217,110,234,.28) !important;
  box-shadow:
    0 10px 24px rgba(174,111,240,.16),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.api-clean-page .api-preview-card-tile:hover .api-card-logo,
.api-clean-page .api-preview-card-tile.selected .api-card-logo {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(145deg, #ae6ff0, #7c3aed 60%, #d96eea) !important;
  border-color: rgba(217,110,234,.44) !important;
  box-shadow:
    0 12px 28px rgba(174,111,240,.22),
    0 0 18px rgba(217,110,234,.12),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.api-clean-page .api-card-logo .api-card-icon {
  color: #fff !important;
}

/* Texto */
.api-clean-page .api-preview-card-tile strong {
  color: #f4efff !important;
  font-weight: 700 !important;
}

.api-clean-page .api-preview-card-tile em {
  color: rgba(198,187,228,.62) !important;
}

.api-clean-page .api-card-note {
  color: rgba(198,187,228,.54) !important;
}

/* Badges de status: mantém semântica, mas dentro da paleta FlowZen */
.api-clean-page .api-mini-status.yel {
  background: rgba(174,111,240,.15) !important;
  color: #d8b4fe !important;
}

.api-clean-page .api-mini-status.green {
  background: rgba(74,222,128,.14) !important;
  color: #4ade80 !important;
}

.api-clean-page .api-mini-status.acc,
.api-clean-page .api-mini-status.blue,
.api-clean-page .api-mini-status.muted {
  background: rgba(174,111,240,.16) !important;
  color: #d8b4fe !important;
}

.api-clean-page .api-mini-status.danger {
  background: rgba(248,113,113,.14) !important;
  color: #f87171 !important;
}

/* Check selecionado */
.api-clean-page .api-selected-check {
  background: linear-gradient(135deg, #ae6ff0, #d96eea) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 2px rgba(8,8,11,.95),
    0 0 18px rgba(174,111,240,.34) !important;
}

/* Chips/filtros */
.api-clean-page .api-preview-chip {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(174,111,240,.18) !important;
  color: rgba(226,218,246,.68) !important;
}

.api-clean-page .api-preview-chip:hover,
.api-clean-page .api-preview-chip.active {
  background: linear-gradient(135deg, #ae6ff0, #8b50db 62%, #d96eea) !important;
  border-color: rgba(217,110,234,.42) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(174,111,240,.22) !important;
}

/* Search, select e botões de visualização */
.api-clean-page .api-preview-search-row input,
.api-clean-page .api-preview-search-row select,
.api-clean-page .api-view-btn {
  background: rgba(5,5,12,.78) !important;
  border: 1px solid rgba(174,111,240,.18) !important;
  color: #e8defa !important;
}

.api-clean-page .api-preview-search-row input:focus,
.api-clean-page .api-preview-search-row select:focus {
  border-color: rgba(174,111,240,.55) !important;
  box-shadow: 0 0 0 3px rgba(174,111,240,.10) !important;
}

.api-clean-page .api-view-btn.active {
  background: linear-gradient(135deg, #ae6ff0, #8b50db) !important;
  color: #fff !important;
  border-color: rgba(217,110,234,.34) !important;
}

/* Painel de detalhe da integração selecionada */
.api-clean-page .api-preview-detail,
.api-clean-page .api-preview-card {
  background:
    radial-gradient(circle at top left, rgba(174,111,240,.07), transparent 38%),
    linear-gradient(145deg, rgba(12,9,24,.96), rgba(7,7,13,.98)) !important;
  border-color: rgba(174,111,240,.14) !important;
}

.api-clean-page .api-preview-title-row .api-card-icon.large {
  background: linear-gradient(145deg, #ae6ff0, #6d35d7, #d96eea) !important;
  color: #fff !important;
  border-color: rgba(217,110,234,.34) !important;
}

/* KPIs superiores dentro da mesma identidade */
.api-clean-page .api-preview-kpi {
  background:
    radial-gradient(circle at top left, rgba(174,111,240,.08), transparent 40%),
    linear-gradient(145deg, rgba(12,9,24,.96), rgba(7,7,13,.98)) !important;
  border-color: rgba(174,111,240,.14) !important;
}

.api-clean-page .api-preview-kpi-icon {
  background: linear-gradient(145deg, rgba(174,111,240,.28), rgba(217,110,234,.14)) !important;
  color: #d8b4fe !important;
}

/* Exceção semântica: verde só para status realmente conectado */
.api-clean-page .api-preview-kpi.green .api-preview-kpi-icon {
  background: rgba(74,222,128,.14) !important;
  color: #4ade80 !important;
}

.api-clean-page .api-preview-kpi.danger .api-preview-kpi-icon {
  background: rgba(248,113,113,.15) !important;
  color: #f87171 !important;
}


/* ============================================================
   FlowZen — redução de brilho/glow (~50%)
   Ajuste fino visual da aba API & Conexões
   ============================================================ */

/* Cards */
.api-clean-page .api-preview-card-tile {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 6px 16px rgba(0,0,0,.08) !important;
}

.api-clean-page .api-preview-card-tile:hover {
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    0 0 0 1px rgba(174,111,240,.05) !important;
}

.api-clean-page .api-preview-card-tile.selected {
  box-shadow:
    0 0 0 1px rgba(217,110,234,.14),
    0 0 14px rgba(174,111,240,.08),
    inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* Ícones */
.api-clean-page .api-card-logo,
.api-clean-page .api-card-logo[class*="api-brand-"] {
  box-shadow:
    0 5px 12px rgba(174,111,240,.08),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.api-clean-page .api-preview-card-tile:hover .api-card-logo,
.api-clean-page .api-preview-card-tile.selected .api-card-logo {
  box-shadow:
    0 6px 14px rgba(174,111,240,.11),
    0 0 8px rgba(217,110,234,.06),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Check selecionado */
.api-clean-page .api-selected-check {
  box-shadow:
    0 0 0 2px rgba(8,8,11,.95),
    0 0 9px rgba(174,111,240,.18) !important;
}

/* Chips ativos */
.api-clean-page .api-preview-chip:hover,
.api-clean-page .api-preview-chip.active {
  box-shadow: 0 5px 12px rgba(174,111,240,.11) !important;
}

/* KPIs do topo */
.api-clean-page .api-preview-kpi {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 6px 18px rgba(0,0,0,.08) !important;
}