/* ===========================================================================
   MÓDULO ADMIN — Administração do Sistema
   ---------------------------------------------------------------------------
   Este arquivo veio do `public/styles.css` na CS2 do `CSS_POR_MODULO_LOOP.md`
   (item 35): são as regras que só esta tela usa. O que é de TODOS (a casca, os
   primitivos, o BI) continua em `styles.css`/sdk-ui, e o mapa de donos é
   `scripts/lib/modulos-do-front.js`. Carregado no `index.html` logo DEPOIS de
   `styles.css` — a ordem é o que preserva a cascata de antes da mudança.
   Regra nova de tela daqui nasce AQUI, não no `styles.css`.
   =========================================================================== */

/* O dropdown já era claro (`#fff` cravado) dentro de um shell escuro — era a
   incoerência mais visível do painel. Agora é o token `popover`, que é o que o
   ZardUI usa para menu/dropdown, e passa a acompanhar o tema. */
.hamburger-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--foreground) 12%, transparent);
  z-index: 1000;
  overflow: hidden;
}

.menu-item {
  /* 🔴 `flex` + `gap`, não `block` + um espaço no HTML: com ícone de verdade (21/09) o
     espaçamento passou a ser parte do desenho, e caractere de espaço mede pela FONTE
     (≈4px a 0.875rem) em vez de pelo token. É o mesmo par ícone+rótulo de
     `suporte-painel.html`, que já era flex. Itens sem ícone não mudam: sem irmão, o
     `gap` não tem onde se aplicar. */
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--popover-foreground);
  transition: background 0.15s ease;
}

/* Item que é LINK (ex.: "Painel de TV", página própria em aba nova) — sem o
   sublinhado do navegador, para não destoar dos botões do mesmo menu. */
a.menu-item {
  text-decoration: none;
}

.menu-item:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.menu-item-danger {
  color: var(--destructive);
}

.menu-item-danger:hover {
  background: var(--error-bg-soft);
  color: var(--error-strong);
}

.cfg-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1.125rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.cfg-card-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.cfg-obrigatorio { color: var(--destructive); }

.cfg-hint { font-weight: 400; opacity: 0.7; }

.cfg-linha {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.cfg-nivel {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--primary);
}

.cfg-desc {
  font-size: 0.8rem;
  color: var(--muted-foreground);
}

.cfg-modelo {
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted-foreground);
}

/* Campo de modelo da tela de Configurações. Os nomes deixaram de ser texto fixo
   no HTML e passaram a ser editáveis (sessão 113) — o markup fixo já tinha ficado
   desatualizado duas vezes, a última exibindo dois modelos que os provedores
   haviam removido. Cor SÓ por token: `--border`/`--input`/`--foreground` vêm de
   /sdk-ui/tokens.css, e valor cravado aqui é o que a ponte de vocabulário existe
   para acabar. */
.cfg-modelo-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 6px;
  /* Pilha literal, igual à `.cfg-modelo` acima: `--font-mono` não é declarado
     em nenhum lugar, e `var()` de token inexistente resolve para string VAZIA,
     sem erro no console. Preso por public/js/__tests__/tema-shell.test.js. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--foreground);
  background: var(--input, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.cfg-modelo-input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

/* Rescue é o degrau PAGO (Gemini): fica visualmente recuado de propósito, para
   não parecer tão editável quanto os gratuitos. */
.cfg-modelo-input--fraco { opacity: 0.75; }

/* Rótulo curto ao lado do campo, no cartão do classificador. */
.cfg-campo-rotulo {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.cfg-rodape { margin-left: auto; font-size: 0.75rem; color: var(--muted-foreground); }

.cfg-center { text-align: center; }

/* Interruptor de nível: o `<input type="checkbox">` guarda o estado e fica
   invisível; o trilho e o polegar são o que se vê. A classe `--on` é ligada
   por configuracoes-panel.js e é a ÚNICA fonte do estado visual. */
.inf-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.inf-checkbox {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.inf-track {
  display: inline-flex;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--muted);
  border: 1px solid var(--muted-foreground);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}

.inf-track--on {
  background: color-mix(in oklch, var(--primary) 20%, transparent);
  border-color: var(--primary);
}

.inf-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted-foreground);
  top: 3px;
  left: 3px;
  transition: transform 0.2s, background 0.2s;
}

.inf-track--on .inf-thumb {
  transform: translateX(18px);
  background: var(--primary);
}

.inf-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted-foreground);
  min-width: 52px;
}

.inf-label--on { color: var(--primary); }

/* =========================================
   INTEGRATIONS — Tab system
   ========================================= */
.integrations-subtabs,
.senders-subtabs,
.docs-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 1rem;
  flex-shrink: 0;
}

/* ── Segredos por cliente (sessão 186) ─────────────────────────────────────
   Mockup: docs/specs/segredos-por-cliente-mockup.html. Comportamento em
   public/js/panels/segredos-panel.js. Só tokens do E-Store (DESIGN.md). */
.segredos-topo {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
}

.segredos-topo-cliente { flex: 1; min-width: 14rem; max-width: 28rem; }

.segredos-corpo { flex: 1; overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }

.segredos-legenda { margin: 0.4rem 0 0; font-size: 0.8rem; font-weight: 600; color: var(--muted-foreground); }

.segredos-vazio { margin: 0; font-size: 0.85rem; color: var(--muted-foreground); }

.segredos-campo-provedor { min-width: 10rem; }

.segredos-campo-valor { flex: 1; min-width: 14rem; }

.segredos-mascara { color: var(--muted-foreground); letter-spacing: 0.1em; }

.segredos-revelado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.segredos-revelado-valor { overflow-wrap: anywhere; font-size: 0.8rem; }

.segredos-hermes-acoes { margin: 0.7rem 0 0.2rem; }

.segredos-contagem { font-size: 0.72rem; color: var(--muted-foreground); }

.segredos-detalhe-dados { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 0.8rem; margin: 0 0 1rem; font-size: 0.85rem; }

.segredos-detalhe-dados dt { color: var(--muted-foreground); }

.segredos-detalhe-dados dd { margin: 0; min-width: 0; }

.segredos-detalhe-acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; }