/* Segundo menu (guia 2.27). Cores só por token; alturas pela escala --size-*. */

/* A linha abaixo do header: o segundo menu à esquerda e a coluna do conteúdo (main e rodapé) à direita.
   O menu fica parado logo abaixo do header (64px; 48 com a sidebar recolhida; mais 40 por faixa do shell, 2.16 e 2.25)
   e vai até o fim da janela; se as seções não couberem, rola sozinho. */
.sm-row{--sm-hdr:64px;--sm-band:0px;--sm-top:calc(var(--sm-hdr) + var(--sm-band));display:flex;flex:1;min-width:0}
.app.collapsed .sm-row{--sm-hdr:48px}
.band~.sm-row{--sm-band:40px}
.band~.band~.sm-row{--sm-band:80px}
.sm-nav{position:sticky;top:var(--sm-top);align-self:flex-start;flex-shrink:0;width:224px;height:calc(100dvh - var(--sm-top));overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--muted);border-right:1px solid var(--border);transition:top .15s,height .15s}
.sm-group{display:flex;flex-direction:column;gap:4px}
.sm-label{padding:8px 8px 4px;font-size:12px;line-height:16px;font-weight:500;color:var(--muted-foreground)}
/* o item tem a altura padrão (1.5); o texto fica a 8px da borda, alinhado ao rótulo do grupo */
.sm-item{display:flex;align-items:center;flex-shrink:0;height:var(--size-default);padding:0 7px;border:1px solid transparent;border-radius:var(--radius-control);color:var(--foreground);font-size:14px;line-height:20px;text-decoration:none;min-width:0}
.sm-item:hover{background:color-mix(in srgb,var(--card) 50%,transparent)}
.sm-item[aria-current=page]{background:var(--card);border-color:var(--edge);font-weight:500}
.sm-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-col{flex:1;min-width:0;display:flex;flex-direction:column}
/* com o menu ao lado, a primeira box desce 16px, alinhada ao primeiro rótulo; toda seção usa a largura que sobra (D23) */
@media (min-width:1024px){.sm-col>.main{padding-top:16px}}
/* breadcrumb de três níveis (Grupo › Item › Seção, 2.17): encurta com reticências, nunca com um texto por cima do
   outro. O item do meio (o link) fica inteiro até metade da largura; encurtam o grupo, quando está à vista, e o último */
.crumb li:has(>a){flex-shrink:0;max-width:50%}
.crumb a{min-width:0;overflow:hidden;text-overflow:ellipsis}
@container hdr (width > 40rem){.crumb li.crumb-group{display:block;overflow:hidden;text-overflow:ellipsis}}
/* abaixo de 1024px: o Select "Seção" no topo do conteúdo, antes da primeira box */
.sm-pick{padding:0 24px 16px}
@media (max-width:767px){.sm-pick{padding:0 16px 16px}}

/* ---------- as seções de Geral ---------- */
.fields.col1{grid-template-columns:1fr}
.cfg-mono{font-family:var(--font-mono)}
.cfg-mono.nowrap{white-space:nowrap}
.cfg-url{overflow-wrap:anywhere}   /* URL longa quebra em qualquer ponto, em vez de empurrar a tabela */
.cfg-trunc{width:100%;max-width:0}   /* a célula pega a sobra da linha e corta o texto numa linha só */
.cfg-trunc>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-tempo{display:flex;gap:8px;min-width:0}
.cfg-tempo>.input{flex:1;min-width:0}
.cfg-tempo>.select{flex:0 0 128px}
.cfg-key{display:flex;align-items:flex-start;gap:8px;min-width:0}
.cfg-key>.input{flex:1;min-width:0;resize:none;overflow-wrap:anywhere}   /* a chave inteira à vista, em duas linhas */
.cfg-check{padding-top:4px}
/* os eventos do webhook: checkbox (escolha múltipla num formulário com "Salvar", 2.4), em duas colunas */
.cfg-set{border:0;margin:0;padding:0;min-width:0}
.cfg-set legend{padding:0;margin-bottom:8px;font-weight:500}
.cfg-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 16px}
.cfg-set .err{display:block;margin-top:8px;color:var(--danger)}