/* ==========================================================================
   SGP — Design System · Camada 14: .tela-mestre (esqueleto mestre-detalhe)
   ==========================================================================

   POR QUE UM ESQUELETO NOVO, E NÃO UM AJUSTE EM `.tres-colunas`.

   Quatro telas repetem o mesmo desenho (Pessoas, Atendimentos, Proposições e,
   adiante, a ficha de Organização) e todas herdaram do legado a MESMA falha: a
   coluna 1 é uma pilha vertical de filtros que rouba 240px de largura útil e
   ainda assim corta nome comprido, e não existe lugar para o histórico. O
   conserto é geométrico — filtros viram uma LINHA no topo, e a largura que
   sobrou vira a quarta área.

   `.tres-colunas` continua de pé, intocada: Modelos, Documentos, Configurações
   e a tela de sugestão de WhatsApp ainda a usam. Mexer nela para servir quatro
   áreas mudaria oito telas que esta fatia não mediu.

   AS DUAS REGRAS QUE SUSTENTAM TUDO (herdadas de 10_grid_base.css, F05):
   item de grid nasce com `min-width: auto` e se recusa a encolher — daí o
   `min-width: 0` em toda área; e coluna que rola por dentro precisa de linha de
   altura LIMITADA — daí `minmax(0, 1fr)` nas linhas com o container de altura
   fechada. Sem os dois juntos, ou a página inteira rola, ou a área vizinha é
   empurrada para fora da janela.
   ========================================================================== */

.tela-mestre {
  /* Trilhos nomeados: quem consome muda o valor sem reescrever o grid. */
  --tela-mestre-lista: 340px;
  --tela-mestre-historico: 320px;
  /* A altura útil = janela menos o cromo fixo (token de F05, que já cresce
     junto com a faixa de aviso do chassi) menos o respiro de `.conteudo`. */
  --tela-mestre-altura: calc(100vh - var(--alt-cromo) - var(--esp-6) - var(--esp-12));

  display: grid;
  grid-template-columns: var(--tela-mestre-lista) minmax(0, 1fr) var(--tela-mestre-historico);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "filtros filtros filtros"
    "lista   ficha   historico";
  gap: 0;
  /* ALTURA FECHADA, E NÃO `min-height`.
     Num grid de altura indefinida, `1fr` se resolve pelo CONTEÚDO: a linha
     cresce com a lista, a coluna nunca chega a ter o que rolar por dentro e
     quem rola é a página inteira — com a barra de filtros sumindo para cima. Só
     com a altura fechada aqui é que `minmax(0, 1fr)` vira teto de verdade e o
     `overflow: auto` de cada área passa a valer. (Medido: 42 pessoas na lista,
     scrollHeight == clientHeight == 2099px com `min-height`.)
     O piso de 480px protege janela baixa: aí a página rola, e não o esqueleto
     espremido a ponto de não caber uma linha de lista. */
  height: max(480px, var(--tela-mestre-altura));
  background: var(--cor-fundo-elevado);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

/* Sem histórico o esqueleto é de três áreas — e a ficha fica com a largura que
   sobra, em vez de deixar uma coluna vazia desenhada na tela. */
.tela-mestre--sem-historico {
  grid-template-columns: var(--tela-mestre-lista) minmax(0, 1fr);
  grid-template-areas:
    "filtros filtros"
    "lista   ficha";
}

.tela-mestre__area {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.tela-mestre__area--filtros {
  grid-area: filtros;
  overflow: hidden;
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-fundo-sutil);
}

.tela-mestre__area--lista {
  grid-area: lista;
  border-right: 1px solid var(--cor-borda);
}

.tela-mestre__area--ficha { grid-area: ficha; }

.tela-mestre__area--historico {
  grid-area: historico;
  border-left: 1px solid var(--cor-borda);
  background: var(--cor-fundo-sutil);
}

/* --------------------------------------------------------------------------
   1100–1500px — o histórico desce para baixo da ficha.
   Notebook comum. Espremer quatro colunas aqui deixaria a ficha (que é o
   trabalho) com menos largura que a lista. A lista atravessa as duas linhas
   porque ela é navegação: encurtá-la é perder contexto.
   -------------------------------------------------------------------------- */
@media (max-width: 1499px) {
  .tela-mestre {
    grid-template-columns: var(--tela-mestre-lista) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, auto);
    grid-template-areas:
      "filtros filtros"
      "lista   ficha"
      "lista   historico";
  }

  .tela-mestre--sem-historico {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "filtros filtros"
      "lista   ficha";
  }

  .tela-mestre__area--historico {
    border-left: 0;
    border-top: 1px solid var(--cor-borda);
    max-height: 34vh;
  }
}

/* --------------------------------------------------------------------------
   Abaixo de 1100px — empilha, e a barra de filtros rola na horizontal.
   Aqui o que rola é a PÁGINA (min-height: 0 solta as áreas), menos a barra de
   filtros: chip que quebra linha em telefone vira um paredão de três alturas
   antes da lista aparecer.
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .tela-mestre {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "filtros"
      "lista"
      "ficha"
      "historico";
    /* Empilhado, quem rola é a PÁGINA: altura fechada aqui esconderia a ficha
       dentro de um retângulo de 480px no meio da tela. */
    height: auto;
  }

  .tela-mestre--sem-historico {
    grid-template-rows: auto;
    grid-template-areas:
      "filtros"
      "lista"
      "ficha";
  }

  .tela-mestre__area {
    overflow: visible;
    max-height: none;
  }

  .tela-mestre__area--filtros { overflow: hidden; }

  .tela-mestre__area--lista {
    border-right: 0;
    border-bottom: 1px solid var(--cor-borda);
    max-height: 50vh;
    overflow: auto;
  }

  .tela-mestre__area--historico {
    border-left: 0;
    border-top: 1px solid var(--cor-borda);
  }
}

/* ==========================================================================
   A barra de filtros — a coluna 1 do legado deitada
   ==========================================================================

   Mesmos `link_to` GET, mesmos params, mesmo controller: só a forma muda. O
   rótulo "Filtros" é contrato de tela (test/system/pessoas_test.rb) e continua
   visível.
   ========================================================================== */

.barra-filtros {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  min-width: 0;
  padding: var(--esp-3) var(--esp-4);
}

/* SEM `text-transform: uppercase` AQUI, DE PROPÓSITO.
   O rótulo "Filtros" é contrato de tela: test/system/pessoas_test.rb:33 procura
   o texto renderizado, e `uppercase` faz o Chrome devolver "FILTROS" — o teste
   cai com a tela certa na frente. Caixa alta de estilo, quando for o caso, se
   faz com `font-variant-caps`, que não mexe no texto que o navegador expõe. */
.barra-filtros__titulo {
  flex: none;
  margin: 0;
  padding-top: 3px;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: .02em;
  color: var(--cor-texto-suave);
}

/* A IDENTIDADE DA TELA na barra — só existe quando a tela passa `descricao`.
   O esqueleto mestre tem ALTURA FECHADA e não comporta um cabeçalho acima
   dele (um <h1> ali empurra a lista para fora da janela); as telas que
   precisam se apresentar dizem o nome e a frase de explicação aqui, no lugar
   onde antes só cabia o rótulo "Filtros". A largura em `ch` é para a frase
   quebrar em duas linhas curtas em vez de comer o espaço dos chips. */
.barra-filtros__identidade {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  max-width: 34ch;
  min-width: 0;
}

/* O nome e o "?" na mesma linha. O botão é IRMÃO do <h2> (regra de ouro do
   DicasHelper): dentro dele o balão seria conteúdo inválido de cabeçalho e o
   leitor de tela anunciaria o glossário inteiro como título da tela. */
.barra-filtros__nome {
  display: flex;
  align-items: baseline;
  gap: var(--esp-1);
  min-width: 0;
}

.barra-filtros__descricao {
  margin: 0;
  font-size: var(--texto-xs);
  line-height: 1.35;
  color: var(--cor-texto-fraco);
  text-wrap: pretty;
}

/* NO APARELHO A FRASE FICA. Esconder era a decisão fácil (a barra é apertada),
   mas a explicação É o entregável desta fatia: o cliente disse duas vezes que
   não entendia a tela offline, e ela é justamente a que "só existe porque
   existe aparelho". Sumir com a frase no celular devolve o problema para quem
   mais o tem. O que muda no estreito é a largura: a identidade ocupa a linha
   inteira e a frase quebra em duas ou três linhas curtas, em vez de disputar
   espaço com os chips.

   O `flex-wrap` é ESCOPADO ao modificador, não solto em `.barra-filtros`: a
   barra é o topo de todas as telas do esqueleto mestre (pessoas, atendimentos,
   tarefas, proposições, organizações, pauta) e ali dentro o
   `.barra-filtros__conteudo` continua sendo `nowrap` + rolagem horizontal de
   propósito. Deixar quebrar quem não tem identidade mudaria seis telas para
   resolver duas.

   COMPORTAMENTO NÃO CONFERIDO EM NAVEGADOR nesta fatia (a suíte de sistema não
   rodou aqui): o que está travado por teste é a marcação — a classe só sai
   quando a tela passa `descricao`/`dica`. */
@media (max-width: 767px) {
  .barra-filtros--com-identidade { flex-wrap: wrap; }

  .barra-filtros--com-identidade .barra-filtros__identidade {
    flex: 1 0 100%;
    max-width: none;
  }
}

.barra-filtros__conteudo {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-5);
  min-width: 0;
}

.barra-filtros__grupo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}

/* Casca de quem agrupa MAIS DE UM grupo sob um id só (os contadores de
   Atendimentos, que o Turbo Stream troca inteiros). `display: contents` deixa a
   casca existir para o Turbo e sumir para o layout. */
.barra-filtros__bloco { display: contents; }

.barra-filtros__rotulo {
  flex: none;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
  white-space: nowrap;
}

.barra-filtros__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1);
  min-width: 0;
}

/* A gaveta dos excedentes é <details> nativo e abre PARA DENTRO da linha (não é
   flutuante): a área de filtros tem `overflow: hidden`, e um balão posicionado
   seria recortado por ela. Abrindo em linha, a linha cresce — e é a única
   linha `auto` do grid justamente para isso. */
.barra-filtros__gaveta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-width: 0;
}
.barra-filtros__gaveta > summary { list-style: none; }
.barra-filtros__gaveta > summary::-webkit-details-marker { display: none; }
.barra-filtros__gaveta-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   A GAVETA VERTICAL — o "menu de seleção vertical" que o cliente pediu

   Dimensão comprida (muitas etiquetas, muitas cidades, a equipe inteira) não
   cabe numa fita horizontal: no aparelho "você tem que ficar passando para o
   lado", e no computador a linha vira um paredão. Aqui a mesma gaveta nativa
   abre uma COLUNA de opções, cada uma alternável, com teto de altura e rolagem
   própria — a área de filtros tem `overflow: hidden` e a linha do grid é
   `auto`, então a gaveta pode crescer, mas não pode crescer sem fim.
   -------------------------------------------------------------------------- */
.barra-filtros__gaveta--lista {
  position: relative;
  align-items: flex-start;
  flex-direction: column;
}

.barra-filtros__gaveta--lista > summary { display: inline-flex; }

.chip__seta {
  flex: none;
  font-size: var(--texto-2xs);
  color: var(--cor-texto-fraco);
  transition: transform var(--transicao-rapida);
}
.barra-filtros__gaveta[open] > .chip--gaveta .chip__seta { transform: rotate(180deg); }

.barra-filtros__gaveta-conteudo--coluna {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 2px;
  width: 15rem;
  max-width: 100%;
  max-height: 16rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: var(--esp-1);
  padding: var(--esp-1);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-elevado);
}

/* Em coluna o chip deixa de ser pílula e vira LINHA de menu: largura inteira,
   rótulo alinhado à esquerda e contagem encostada na direita — é o que faz a
   lista se varrer de cima a baixo em vez de item a item. */
.barra-filtros__gaveta-conteudo--coluna .chip {
  width: 100%;
  justify-content: flex-start;
  border-color: transparent;
  border-radius: var(--raio-sm);
  background: transparent;
  white-space: normal;
  text-align: left;
}
.barra-filtros__gaveta-conteudo--coluna .chip:hover { background: var(--cor-fundo-afundado); }
.barra-filtros__gaveta-conteudo--coluna .chip--ativo {
  background: var(--cor-acao-suave);
  border-color: var(--cor-acao);
}
/* Sem teto de 22ch aqui: a coluna tem largura própria, o nome comprido cabe. */
.barra-filtros__gaveta-conteudo--coluna .chip__rotulo {
  flex: 1;
  max-width: none;
  overflow: visible;
}

/* O FILTRO POR PERÍODO — mesma gaveta, conteúdo de formulário.
   Classe própria (e não `__gaveta`) porque ela NÃO é a gaveta de excedentes: o
   teste de tela conta gavetas de opção para saber se um grupo transbordou, e
   um formulário de data entrando nessa conta mentiria a resposta. */
.barra-filtros__periodo {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.barra-filtros__periodo > summary { list-style: none; }
.barra-filtros__periodo > summary::-webkit-details-marker { display: none; }
.barra-filtros__periodo[open] > .chip--gaveta { background: var(--cor-fundo-afundado); color: var(--cor-texto); }

.filtro-periodo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-1);
}
.filtro-periodo__campo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filtro-periodo__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}
/* O "limpar período" é chip dentro de uma coluna de opções: sem isto ele
   herdaria a largura inteira da lista e viraria uma barra vermelha. */
.filtro-periodo__acoes .chip { width: auto; }

@media (max-width: 1099px) {
  .barra-filtros { align-items: center; }
  .barra-filtros__conteudo,
  .barra-filtros__chips,
  .barra-filtros__gaveta-conteudo {
    flex-wrap: nowrap;
  }
  /* A gaveta vertical é justamente a saída para a fita que rola de lado: ela
     mantém a coluna também no aparelho, e cabe porque tem largura fluida. */
  .barra-filtros__gaveta-conteudo--coluna {
    flex-direction: column;
    width: min(15rem, 72vw);
    max-height: 50vh;
  }
  .barra-filtros__conteudo {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: var(--esp-1);
  }
}

/* ==========================================================================
   O chip — um filtro GET que se lê de relance
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  flex: none;
  max-width: 100%;
  min-width: 0;
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  line-height: var(--altura-apertada);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida), color var(--transicao-rapida);
}
.chip:hover { background: var(--cor-fundo-afundado); color: var(--cor-texto); }
.chip:focus-visible { outline: none; box-shadow: var(--sombra-foco); }

.chip--ativo {
  background: var(--cor-acao-suave);
  border-color: var(--cor-acao);
  color: var(--cor-acao-forte);
}

/* O rótulo é o único pedaço elástico do chip: nome de lista comprido encolhe
   com reticências em vez de esticar a barra e devolver rolagem horizontal para
   a página inteira (é a mesma causa do "cortado" de F05). */
.chip__rotulo {
  min-width: 0;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip__ponto {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.chip__contagem {
  flex: none;
  color: var(--cor-texto-fraco);
  font-size: var(--texto-2xs);
  font-weight: var(--peso-semi);
}
.chip--ativo .chip__contagem { color: inherit; }
.chip--perigo .chip__contagem { color: var(--sgp-perigo); }

/* "Limpar filtros" é ação, não estado: pontilhado para não competir com os
   chips ativos. Ele só existe no DOM quando há filtro aplicado. */
.chip--limpar { border-style: dashed; }

/* O "+3" da gaveta herda tudo de .chip e ganha só o estado aberto. */
.barra-filtros__gaveta[open] > .chip--gaveta {
  background: var(--cor-fundo-afundado);
  color: var(--cor-texto);
}