/* O que é específico das telas deste projeto, sobre o design system da administração.
   Estilo de conversa NÃO entra aqui: a tela de chat é da Web.Publico. */

/* Conteúdo cru de chunk e texto vetorizado. `pre-wrap` porque o recuo e as quebras do Markdown
   original fazem parte do que se está diagnosticando. */
.conteudo-chunk {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 18rem;
    overflow-y: auto;
    font-size: .8125rem;
    margin: 0;
}

details summary {
    cursor: pointer;
}

dl.row dt {
    font-weight: 600;
}

/* Evita que as listas de diagnóstico estourem em telas estreitas. */
@media (max-width: 575.98px) {
    dl.row dt, dl.row dd {
        width: 100%;
    }
}

/* Título das telas, no formato do `botao-voltar` do Tramita (que aqui não volta para lugar
   nenhum — é só o título). */
.container-titulo .botao-voltar {
    cursor: default;
}

/* ---------------------------------------------------------------------------
   Correção de overflow em telas estreitas

   O `.row` do Bootstrap tem margem lateral NEGATIVA de metade da gutter, e conta com o padding do
   container para compensá-la. O `adm-container-very-large` que veio do Tramita cai para
   `padding: 0 0.25rem` (4px) abaixo de 992px, mas nossas linhas usam `g-3` — gutter de 1rem, ou
   seja 8px negativos de cada lado. Sobram 4px para fora, e a página ganha scroll horizontal.

   Igualar o padding à metade da gutter resolve na origem. `overflow-x: hidden` no body
   esconderia o sintoma e deixaria a próxima ocorrência passar em branco.
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .adm-container-very-large {
        padding: 0 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   Tela de Perguntas (análise do que os usuários perguntaram)
   --------------------------------------------------------------------------- */

/* A linha inteira abre o offcanvas de detalhes. */
.tabela-perguntas tbody tr {
    cursor: pointer;
}

/* Pergunta e resposta podem ser longas: a listagem mostra duas linhas, e o offcanvas mostra tudo.
   O texto inteiro fica no `title`, para o mouse. */
.tabela-perguntas .celula-texto {
    min-width: 16rem;
    max-width: 28rem;
}

.tabela-perguntas .celula-texto,
.tabela-perguntas .celula-texto .btn {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* `display: -webkit-box` tira a célula do layout de tabela; o botão interno já tem o seu clamp. */
.tabela-perguntas td.celula-texto {
    display: table-cell;
}

.tabela-perguntas td.celula-texto .btn {
    padding: 0;
}

/* A marca de tratamento na linha da Cobertura (ADR-20): o formulário abre no lugar, então a coluna tem
   largura mínima para o select e o textarea caberem, e máxima para a observação não alargar a tabela. */
.tabela-perguntas .celula-tratamento {
    min-width: 12rem;
    max-width: 18rem;
    cursor: default;
}

/* A listagem da tela de Perguntas: um item por pergunta, texto à esquerda e sinais de triagem à direita.
   Pergunta e resposta têm a largura toda (a tabela as espremia entre seis colunas curtas). */
.lista-perguntas .item-pergunta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 11rem;
    gap: 0.25rem 1rem;
    border-left: 4px solid transparent;
    cursor: pointer;
}

/* A borda esquerda repete o sinal mais forte (feedback ou recusa), para varrer a página de olho. */
.lista-perguntas .item-pergunta.borda-sucesso { border-left-color: var(--bs-success); }
.lista-perguntas .item-pergunta.borda-perigo { border-left-color: var(--bs-danger); }
.lista-perguntas .item-pergunta.borda-aviso { border-left-color: var(--bs-warning); }

.lista-perguntas .item-pergunta-texto {
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0.15rem 0 0.25rem;
    word-break: break-word;
}

/* A resposta mostra duas linhas; o offcanvas mostra tudo, e o texto inteiro fica no `title`. */
.lista-perguntas .item-pergunta-resposta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.lista-perguntas .item-pergunta-sinais {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
    text-align: right;
}

.lista-perguntas .item-pergunta-feedback {
    font-size: 1.15rem;
}

/* Siglas do setor, órgão e patriarca: o nome aparece no `title`. */
.lista-perguntas abbr[title] {
    cursor: help;
}

/* Item selecionado (o do offcanvas aberto): o amarelo claro do sistema, no lugar do azul primário do Bootstrap, que
   apagava a borda de feedback e os textos secundários. A variável tem versão escura no `adm-common.css`. As bordas
   coloridas vencem a `border-color` do `.active` por especificidade. */
.lista-perguntas {
    --bs-list-group-active-bg: var(--adm-color-light-3);
    --bs-list-group-active-color: var(--bs-body-color);
    --bs-list-group-active-border-color: var(--bs-border-color);
}

/* Em tela estreita os sinais descem para baixo do texto, em linha. */
@media (max-width: 767.98px) {
    .lista-perguntas .item-pergunta {
        grid-template-columns: minmax(0, 1fr);
    }

    .lista-perguntas .item-pergunta-sinais {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
}

/* O offcanvas de detalhes é largo: tem tabela de trechos e texto de resposta. */
.perguntas-offcanvas {
    --bs-offcanvas-width: min(760px, 100vw);
}

/* Pergunta, resposta e comentário: o texto como foi escrito, com as quebras de linha. */
.texto-longo {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ⚠️ O `.visually-hidden` do Bootstrap é `position: absolute`. Sem um ancestral posicionado, ele escapa do
   recorte do `.table-responsive` e, se a coluna está fora da área visível da tabela, alarga a PÁGINA
   INTEIRA (medido: scrollWidth 880 numa janela de 773). O `relative` faz a tabela ser o bloco de
   contenção, e o `overflow` dela passa a recortá-los. Vale para qualquer tabela responsiva com texto
   só-para-leitor-de-tela. */
.tabela-perguntas-responsiva {
    position: relative;
}

/* ---------------------------------------------------------------------------
   Tela de Cargas (histórico de indexação)
   --------------------------------------------------------------------------- */

/* A linha inteira abre o offcanvas de detalhes. */
.tabela-cargas tbody tr {
    cursor: pointer;
}

/* O detalhe da carga é largo: tem a tabela de chunks, com trilha e URL. */
.cargas-offcanvas {
    --bs-offcanvas-width: min(820px, 100vw);
}

/* URL sem espaço: sem isto, uma URL longa alarga a tabela do offcanvas em vez de quebrar. */
.url-quebra {
    word-break: break-all;
}