/* Tela INTEGRAÇÕES (conexões + catálogo do banco) — protótipo simulado.
   Reusa classes tb-* da tela Tabelas (tb-wrap/tb-list/tb-panel/tb-itg-status/
   tb-sim-badge/tb-dot). Aqui só o que é específico do catálogo. */

/* ---- padrão 5S: ícones SVG (traço, currentColor) + avisos atrás de ℹ ---- */
.ic{display:inline-block;vertical-align:-2px;flex:none}
.rowbtn .ic,.btn-add .ic{margin-right:2px}
/* botão ℹ ao lado do título — abre modal com a explicação (tira o textão da tela) */
.ic-info{background:none;border:0;cursor:pointer;color:var(--muted);padding:2px;border-radius:99px;line-height:1;vertical-align:2px}
.ic-info:hover{color:var(--brand);background:#eef3fc}
.ic-info .ic{width:15px;height:15px;vertical-align:middle}
/* seção compacta nos modais: título + ℹ com tooltip */
.ix-sec{display:flex;align-items:center;gap:6px;font-weight:800;font-size:12px;color:var(--ink);border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.ix-sec-i{color:var(--muted);cursor:help;display:inline-flex;vertical-align:middle}
.ix-sec-i:hover{color:var(--brand)}
.ix-nota{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}

.ix-ro{font-size:9px;font-weight:800;letter-spacing:.3px;color:#1f7a3d;background:#e2f5e9;border-radius:5px;padding:1px 6px;text-transform:uppercase;white-space:nowrap}
.ix-busca{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fff;min-width:240px}
.ix-busca:focus{outline:none;border-color:var(--brand)}

/* lista do catálogo (acordeão de tabelas do banco) */
.ix-cat{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ix-cat-item{border:1px solid var(--line);border-radius:10px;background:#fff}
.ix-cat-item.open{box-shadow:0 1px 3px rgba(10,46,110,.08)}
.ix-cat-hd{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 12px;border:0;background:none;cursor:pointer;font-family:inherit;border-radius:10px}
.ix-cat-hd:hover{background:var(--brand-soft,#f0f4fb)}
.ix-cat-cv{font-size:10px;color:var(--muted);flex:none;width:10px}
.ix-cat-nm{font-weight:800;font-size:12.5px;color:var(--brand);font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.ix-cat-ds{font-size:12px;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ix-cat-nc{font-size:10.5px;color:var(--muted);white-space:nowrap}
/* TELA ESTREITA: o cabeçalho da categoria tem quatro pedaços que não quebram
   (nome, selo, tipo, contador) e sozinhos passam da largura do celular. Deixa
   quebrar em linhas, e a descrição desce inteira em vez de espremer o resto. */
@media(max-width:600px){
  .ix-cat-hd{flex-wrap:wrap}
  .ix-cat-ds{flex:1 0 100%;white-space:normal;overflow:visible;text-overflow:clip}
  /* nome longo (schema.tabela) é uma palavra só e não quebra: trunca com
     reticências em vez de empurrar a linha para fora da tela */
  .ix-cat-nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
.ix-badge-itg{font-size:9.5px;font-weight:800;color:#1f7a3d;background:#e2f5e9;border:1px solid #bfe6cf;border-radius:5px;padding:1px 7px;white-space:nowrap}
/* natureza do objeto no banco: TABELA (azul) x VIEW (roxo) */
.ix-tipo{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;
  padding:1px 6px;border-radius:5px;background:#e8eefb;color:#3358a8;border:1px solid #cfdcf5;cursor:help;flex:none}
.ix-tipo-view{background:#f0e8fb;color:#6a3aa8;border-color:#ded0f3}

/* corpo aberto: campos da tabela */
.ix-cat-body{border-top:1px solid var(--line);padding:10px 12px 12px}
.ix-cols{width:100%;border-collapse:collapse;font-size:12px}
/* thead herda o azul global → fonte BRANCA (muted sumia no azul) */
.ix-cols th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:rgba(255,255,255,.95);padding:4px 8px;border-bottom:1px solid var(--line)}
.ix-cols td{padding:5px 8px;border-bottom:1px solid #eef1f6}
.ix-coln{font-weight:700;font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.ix-colt{color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.ix-cat-act{margin-top:10px;display:flex;justify-content:flex-end;gap:8px}

/* ---- gestão da INTEGRAÇÃO — mora dentro do item do catálogo (tudo junto) ---- */
.ix-itgs{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.ix-itg-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px 12px}
.ix-itg-emb{background:#f6f8fc;margin-bottom:12px}            /* embutido no acordeão do catálogo */
.ix-itg-emb .tb-itg-status{background:#fff}
.ix-itg-hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.ix-itg-hd b{font-size:13px;color:var(--ink)}
.ix-itg-acts{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* badge "integrada" no cabeçalho do catálogo com dot de status dentro */
.ix-badge-itg .tb-dot{width:7px;height:7px;margin-right:5px;vertical-align:1px}
/* coluna "No espelho" na tabela de campos (só quando integrada) */
.ix-col-up{text-align:center;white-space:nowrap;width:1%}
th.ix-col-up{text-align:center}
.ix-up-sim{color:#157a39;font-weight:800}
.ix-up-nao{color:var(--muted)}

/* ---- origem FIXA no modal (conexão + tabela definidas ao integrar) ---- */
.ix-fix{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;align-items:baseline;background:#f6f8fc;border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin-top:4px}
.ix-fix-l{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);white-space:nowrap}
.ix-fix-v{font-weight:700;color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;min-width:0}

/* ---- seleção de CAMPOS no modal da integração (checkboxes em grade) ---- */
/* Cresce PARA BAIXO (rolagem vertical), nunca para a direita: 2 colunas fixas
   que encolhem p/ caber (sem overflow horizontal); 1 coluna em telas estreitas. */
.ix-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px;max-height:340px;overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:#fbfcfe}
@media(max-width:560px){.ix-campos{grid-template-columns:1fr}}
.ix-campo{display:flex;align-items:baseline;gap:7px;font-size:12px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;min-width:0}
.ix-campo input{flex:none;cursor:pointer;vertical-align:-1px}
.ix-campo b{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:11.5px}
/* nome da coluna: monoespaçado, não encolhe além do necessário; nome longo trunca
   (o title da linha mostra o inteiro) */
.ix-coln{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:11.5px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ix-campo-d{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis}

/* aviso quando o agente não dá sinal de vida (pedidos ficariam na fila em silêncio) */
.ix-alerta{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;color:#7a4a10;
  background:#fdf3d7;border:1px solid #eadfae;border-radius:10px;padding:9px 12px;margin:0 0 10px}
.ix-alerta .ic{flex:none;margin-top:2px}