/* nav-contexto.css · v698 — cabecalho de contexto do menu "por telas".
   ---------------------------------------------------------------------------
   SO AS TELAS ADMIN carregam este arquivo, e isso e deliberado: no SPA o mesmo
   seletor de contexto NAO vive na barra, e sim numa faixa horizontal no topo do
   conteudo (`#ctx-bar`, ver frontend/src/modules/nav-telas.js). Duas telas, dois
   lugares. Se um dia isso for unificado, este arquivo morre junto.

   O que ele resolve: no admin, o contexto era montado como dois campos de
   formulario empilhados, com rotulo em cima de cada um, ocupando ~150px do topo
   da barra. Aqui ele vira um cabecalho: uma linha por eixo (projeto e squad),
   sem moldura de campo, com o peso tipografico dizendo quem e o principal. */

.nav-ctx{display:flex;flex-direction:column;gap:1px;padding:0 0 10px}
.nav-ctx-l{display:flex;align-items:center;gap:11px;padding:0 10px;border-radius:11px;
  transition:background .14s}
.nav-ctx-l:hover{background:var(--sb-item-hover)}
.nav-ctx-l>.ic{flex:0 0 auto;width:19px;height:19px;color:var(--faint-on-dark)}
.nav-ctx-l>.ic svg{width:19px;height:19px;display:block}
.nav-ctx .cs{flex:1;min-width:0}

/* o gatilho do select.js deixa de parecer campo: sem moldura, sem fundo, sem sombra.
   A especificidade (.nav-ctx .cs-btn) vence o `.cs-btn` que o componente injeta. */
.nav-ctx .cs-btn{background:transparent;border:1px solid transparent;box-shadow:none;
  padding:9px 0;gap:8px;font-size:13.5px;font-weight:600;color:var(--text-on-dark)}
.nav-ctx .cs-btn:hover{border-color:transparent}
.nav-ctx .cs.open .cs-btn,.nav-ctx .cs-btn:focus-visible{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);border-radius:9px;padding-left:8px;padding-right:8px}
.nav-ctx .cs-arrow{width:14px;height:14px}

/* a squad e o eixo secundario: menor, mais apagada, e some do fluxo quando o projeto
   nao tem squads (o proprio JS nao emite a linha nesse caso) */
.nav-ctx-sq .cs-btn{font-size:12.5px;font-weight:500;color:var(--dim-on-dark);padding:7px 0}
.nav-ctx-sq>.ic{width:17px;height:17px}
.nav-ctx-sq>.ic svg{width:17px;height:17px}

/* engrenagem de CONFIGURACAO do nivel (projeto/squad), a direita do gatilho. Mesmo
   principio da barra de escopo do SPA: onde se escolhe o escopo se configura o escopo.
   Discreta ate o hover para nao competir com o nome do projeto, que e o conteudo. */
.nav-ctx-cfg{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;color:var(--faint-on-dark);text-decoration:none;
  transition:color .14s,background .14s}
.nav-ctx-cfg:hover{color:var(--text-on-dark);background:var(--sb-item-hover);text-decoration:none}
.nav-ctx-cfg:focus-visible{outline:none;color:var(--text-on-dark);box-shadow:0 0 0 3px var(--ring)}
.nav-ctx-cfg .ic{width:15px;height:15px}
.nav-ctx-cfg .ic svg{width:15px;height:15px;display:block}

/* barra recolhida (so icones): o gatilho some e sobra o icone, como nos demais itens */
.app.collapsed .nav-ctx .cs{display:none}
.app.collapsed .nav-ctx-l{justify-content:center;padding:9px 0}
/* recolhida, a engrenagem sairia do lugar (o eixo vira uma coluna de icones): some junto */
.app.collapsed .nav-ctx-cfg{display:none}
/* v749: o contexto do admin virou botao-cabecalho que abre o modal de escopo */
.nav-ctx-btn{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:7px 10px;border:1px solid transparent;border-radius:11px;background:none;color:var(--text-on-dark,inherit);font:inherit;text-align:left;cursor:pointer}
.nav-ctx-btn:hover{background:var(--sb-item-hover);border-color:var(--border-on-dark,transparent)}
.nav-ctx-btn:focus-visible{outline:2px solid var(--accent,#5B89C4);outline-offset:2px}
.nav-ctx-mono{width:30px;height:30px;border-radius:9px;border:1px solid var(--border-on-dark,rgba(255,255,255,.16));display:grid;place-items:center;font-family:'Fraunces',serif;font-size:12.5px;font-weight:600;flex:none}
.nav-ctx-tx{display:flex;flex-direction:column;min-width:0}
.nav-ctx-tx b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-ctx-tx small{font-size:10.5px;color:var(--faint-on-dark,inherit)}
.nav-ctx-chev{margin-left:auto;font-size:12px;color:var(--faint-on-dark,inherit)}
.nav-ctx{flex-direction:row;align-items:center;flex-wrap:wrap}