/* Campos de formulário: um padrão só para busca, filtro, seletor e texto.
   Carregado por ÚLTIMO (index.html), para valer sobre as regras de cada tela.

   O que muda em relação ao padrão do navegador:
   - seletor com seta desenhada (a nativa muda de um sistema para outro e some no modo escuro);
   - busca com lupa em SVG e botão de limpar, no lugar do glifo de texto "⌕";
   - foco em anel claro (2 camadas: borda + halo), visível no teclado e no mouse;
   - hover, desativado e somente leitura com aparência própria;
   - altura de 36px nas barras de lista (busca, filtro, período), 40px nos formulários e diálogos. */

:root {
  --field-ring: color-mix(in srgb, var(--focus-ring, #406a87) 22%, transparent);
  --field-hover: var(--line-hover, #b6b6be);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23646469' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%236e6e76' stroke-width='1.5'/%3E%3Cpath d='m10.6 10.6 3.4 3.4' stroke='%236e6e76' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --limpar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6.2' fill='%23d4d4d8'/%3E%3Cpath d='m4.8 4.8 4.4 4.4m0-4.4-4.4 4.4' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]),
select,
textarea {
  font: inherit;
  font-size: var(--fs-base, 14px);
  line-height: 1.4;
  color: var(--text);
  border: 1px solid var(--line-strong, #d4d4d8);
  border-radius: 8px;
  background-color: var(--surface, #fff);
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):hover,
select:hover,
textarea:hover {
  border-color: var(--field-hover);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--focus-ring, #406a87);
  box-shadow: 0 0 0 3px var(--field-ring);
}
input:disabled, select:disabled, textarea:disabled {
  background-color: var(--surface-subtle, #fafafa);
  color: var(--faint, #6e6e76);
  cursor: not-allowed;
  box-shadow: none;
}
input:read-only:not([type=checkbox]):not([type=radio]):not(:disabled) { background-color: var(--surface-subtle, #fafafa); }
::placeholder { color: var(--faint, #6e6e76); opacity: 1; }

/* Seletor: seta própria */
/* :not(...) só soma especificidade: várias telas definem 'background:' em atalho e apagavam a seta */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  text-overflow: ellipsis;
}
select:disabled { cursor: not-allowed; }
select[multiple] { background-image: none; padding-right: 12px; }

/* Busca: lupa em SVG à esquerda e "limpar" à direita */
input[type=search]:not([hidden]):not([disabled-x]) {
  -webkit-appearance: none;
  appearance: none;
  padding-left: 38px;
  background-image: var(--lupa);
  background-repeat: no-repeat;
  background-position: 13px center;
  background-size: 16px;
}
input[type=search]::-webkit-search-decoration { -webkit-appearance: none; }
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-right: -2px;
  background: var(--limpar) center / 14px no-repeat;
  cursor: pointer;
}
/* O glifo de texto antigo da busca sai: quem desenha a lupa agora é o próprio campo. */
.search-label::before { display: none; }
.search-label input { padding-left: 38px; }
.search-label select { padding-left: 12px; }

/* Barras de lista: campo e botão com a mesma altura (36px), para alinhar na mesma linha */
.tbl-bar input:not([type=checkbox]):not([type=radio]), .tbl-bar select,
.tbl-filter input:not([type=checkbox]):not([type=radio]), .tbl-filter select,
.section-toolbar input:not([type=checkbox]):not([type=radio]), .section-toolbar select,
.fin-top input:not([type=checkbox]):not([type=radio]), .fin-top select,
.connections-tools input:not([type=checkbox]):not([type=radio]) {
  height: 36px;
  min-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
}
.tbl-bar button, .tbl-filter button, .section-toolbar > button, .connections-tools button, .fin-top .fin-button {
  min-height: 36px;
  border-radius: 8px;
}
.tbl-filter { align-items: flex-end; }
.tbl-filter button, .tbl-bar button { height: 36px; padding-top: 0; padding-bottom: 0; }
.tbl-filter label { gap: 6px; }

/* Datas e meses: mantêm o seletor nativo do navegador, no mesmo corpo dos outros campos */
input[type=date], input[type=month], input[type=time], input[type=datetime-local] { padding-right: 10px; }

/* Texto de ajuda e erro sob o campo */
label small, .field-hint { display: block; margin-top: 4px; font-size: 13px; color: var(--muted, #646469); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger, #a44848); }
input:user-invalid:focus, select:user-invalid:focus, textarea:user-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #a44848) 22%, transparent); }

.funnel-bar { margin-bottom: 16px; }

/* ==========================================================================
   Botão de editar: um só em todo o painel (ver botaoEditar em data-table.js).
   ========================================================================== */
.edit-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line-strong, #d4d4d8);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.edit-action svg { width: 14px; height: 14px; flex: none; color: var(--muted, #646469); transition: color .12s ease; }
.edit-action:hover { border-color: var(--field-hover, #b6b6be); background: var(--surface-hover, #f4f4f5); }
.edit-action:hover svg { color: var(--text); }
.edit-action:active { transform: translateY(.5px); }
.edit-action:focus-visible { outline: 0; border-color: var(--focus-ring, #406a87); box-shadow: 0 0 0 3px var(--field-ring, rgba(64, 106, 135, .2)); }
.edit-action:disabled { opacity: .5; cursor: not-allowed; }
/* No cabeçalho de uma ficha: mesma altura do botão principal ao lado */
.edit-action.grande { height: 40px; min-height: 40px; padding: 0 14px; font-size: 14px; }
.edit-action.grande svg { width: 15px; height: 15px; }
/* Ações de linha de tabela (Campanhas, Cobrança...) na mesma altura do editar */
.tbl .table-action { height: 32px; min-height: 32px; display: inline-flex; align-items: center; padding-block: 0; }
.tbl .tbl-actions-row, .detail-row, .product-record-actions { align-items: center; }
/* Toque: alvo maior */
@media (pointer: coarse) { .edit-action { height: 40px; min-height: 40px; } }

/* Configurações: grupo de opções (radio) em lista simples, sem cartões */
.config-grupo { max-width: 560px; margin: 0; padding: 0; border: 0; }
.config-titulo { padding: 0; font-size: var(--fs-lg, 16px); font-weight: 600; color: var(--text-strong, var(--text)); }
.config-ajuda { margin: 4px 0 12px; color: var(--muted); font-size: var(--fs-sm, 13px); }
.config-opcao { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); cursor: pointer; font-weight: 400; }
.config-opcao input { margin-top: 2px; flex: none; }
.config-opcao-texto { display: grid; gap: 2px; }
.config-opcao-texto strong { font-size: var(--fs-base, 14px); font-weight: 500; }
.config-opcao-texto small { color: var(--muted); font-size: var(--fs-sm, 13px); }
.settings-link { justify-content: flex-start; }
.config-notif { display: grid; gap: 20px; margin-top: 16px; }
.config-bloco { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.config-sub { margin: 0; font-size: var(--fs-base, 14px); font-weight: 600; color: var(--text-strong, var(--text)); }
.config-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.config-aviso { min-height: 1.4em; margin: 12px 0 0; color: var(--muted); font-size: var(--fs-sm, 13px); }
.config-aviso.erro { color: var(--danger, var(--text)); }
.config-lembretes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.config-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm, 13px); font-weight: 400; cursor: pointer; }
.config-chip:has(input:checked) { border-color: var(--accent, var(--text)); background: var(--accent-soft, transparent); }
.config-chip:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.config-chip, .tracking-form .config-chip { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; width: auto; }
.config-chip input, .tracking-form .config-chip input { width: auto; margin: 0; flex: none; }

/* Configurações: casca (coluna de seções + seção aberta) */
.cfg { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.cfg-nav { display: grid; gap: 16px; position: sticky; top: 12px; }
.cfg-grupo { display: grid; gap: 2px; }
.cfg-grupo-titulo { margin: 0 0 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cfg-item { display: block; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.cfg-item:hover { background: var(--surface-hover); }
.cfg-item[aria-current="page"] { background: var(--surface-hover); font-weight: 600; }
.cfg-item:focus-visible, .cfg-titulo-secao:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.cfg-corpo { min-width: 0; max-width: 640px; }
.cfg-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cfg-titulo-secao { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--text-strong, var(--text)); outline: none; }
.cfg-escopo { padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--muted); }
.cfg-lista { display: grid; }
.cfg-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.cfg-linha-texto { display: grid; gap: 2px; min-width: 0; }
.cfg-linha-texto strong { font-size: 14px; font-weight: 500; }
.cfg-linha-texto small { color: var(--muted); font-size: 13px; }
.cfg-valor { flex: none; color: var(--muted); font-size: 13px; text-align: right; }
.cfg-nota { display: grid; gap: 6px; margin-top: 8px; padding: 14px 0 0; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); }
.cfg-nota p { margin: 0; }
.cfg-nota strong { color: var(--text); font-weight: 600; }
.cfg-nav-mobile { display: none; }
@media (max-width: 700px) {
 .cfg { grid-template-columns: minmax(0, 1fr); gap: 16px; }
 .cfg-nav { position: static; gap: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
 .cfg-grupo { display: none; }
 .cfg-nav-mobile { display: grid; gap: 6px; width: 100%; }
 .cfg-nav-mobile-rotulo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 .cfg-select-mobile { width: 100%; min-height: 42px; font-size: 15px; font-weight: 500; }
 .cfg-linha { flex-wrap: wrap; }
}
.cfg-cab-bloco { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.cfg-seletor { display: grid; gap: 6px; max-width: 320px; margin-top: 4px; font-size: 13px; font-weight: 500; }
.cfg-atalhos { display: grid; gap: 20px; }
.cfg-atalhos .ag-atalhos-lista { margin: 0; }
.cfg-integracoes { display: grid; gap: 20px; }
.cfg-grupo-integracao { display: grid; }
.cfg-grupo-integracao .config-sub { margin-bottom: 4px; }
.cfg-integracao-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.cfg-faltando { color: var(--muted); }
.cfg-resumo { margin: 0; }
.cfg-google .config-aviso { margin: 8px 0 0; }
.cfg-integracao { flex-wrap: wrap; }
.cfg-integracao-logo { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
.cfg-google .cfg-integracao-logo { align-self: center; }
.cfg-cred-form { flex: 1 0 100%; display: grid; gap: 12px; margin-top: 4px; padding: 14px 0 4px; border-top: 1px dashed var(--line-soft); }
.cfg-cred-campo { display: grid; gap: 4px; max-width: 480px; font-size: 13px; font-weight: 500; }
.cfg-cred-campo small { color: var(--muted); font-weight: 400; font-size: var(--fs-sm, 13px); }
.cfg-cred-remover { justify-self: start; min-height: 32px; padding: 0 10px; font-size: 13px; }
.cfg-cred-hist summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.cfg-cred-hist p { margin: 4px 0 0; }
.cfg-cred-form .config-acoes { margin-top: 0; }
.cfg-cred-form .config-aviso { margin: 0; }
.cfg-integracao > .cfg-linha-texto { flex: 1 1 0; }
.cfg-integracao > button { flex: none; }
.cfg-codigo { display: inline-block; margin-top: 2px; padding: 2px 6px; border-radius: 5px; background: var(--surface-hover); color: var(--text); font-size: 12px; user-select: all; word-break: break-all; }
.cfg-conta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.cfg-conta-acoes select { width: auto; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.cfg-conta-acoes button { min-height: 34px; padding: 0 12px; font-size: 13px; }
.cfg-sem-permissao { margin: 0; color: var(--badge-warning-fg); }
.cfg-registro .cfg-valor { white-space: nowrap; }
.cfg-mcp-secao { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.cfg-mcp-secao .config-sub { margin-bottom: 4px; }
.cfg-mcp-linha { flex-wrap: wrap; }
.cfg-mcp-single-url-box { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cfg-mcp-url-code { font-size: 13px; padding: 8px 12px; border-radius: 6px; background: var(--surface-hover); border: 1px solid var(--line-soft); user-select: all; word-break: break-all; }
.cfg-mcp-endpoint-wrapper { margin-top: 6px; }
.cfg-mcp-instrucoes-box { margin-top: 8px; }
@media (max-width: 700px) { .cfg-conta { flex-wrap: wrap; } }