/* Ajustes finos sobre o Bootstrap — o grid/responsividade já vem dele. */
body { min-height: 100vh; }
.tela-auth { max-width: 420px; margin: 3rem auto; }
.navbar-brand { font-weight: 600; }
.table-responsive { margin-top: 1rem; }

/* Fase 9 — revisão de responsividade (critério de aceite da seção 8.1
   do documento de arquitetura): sem scroll horizontal indevido, área de
   toque mínima de 44px nos botões, texto longo não estoura a tela. */

/* Área de toque mínima em telas pequenas (celular). */
@media (max-width: 576px) {
    .btn { min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; }
    .btn-sm { min-height: 38px; }
    h1, .h4 { font-size: 1.25rem; }
}

/* Nunca deixar texto/URL longo estourar a largura da tela em conteúdo de
   prosa (cards, marca no topo). Tabelas são tratadas à parte, logo abaixo —
   lá quebrar linha célula por célula deixava número/badge/valor cortado no
   meio de um jeito estranho no celular; o certo é rolar a tabela na
   horizontal (para isso existe o .table-responsive), não espremer o texto. */
.card-body, .navbar-brand {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Tabelas: preferimos rolagem horizontal a quebra de linha por célula —
   quebra deixava a tabela com linhas de alturas diferentes e conteúdo
   curto (números, datas, badges) partido ao meio em telas estreitas. */
.table-responsive table th,
.table-responsive table td {
    white-space: nowrap;
}

/* Para colunas com texto mais livre e potencialmente longo (nome de
   cliente/empresa, título, assunto), usar esta classe na <td> para cortar
   com reticências em vez de alargar a tabela inteira sem necessidade. */
.table-responsive table .text-truncate {
    max-width: 220px;
}
@media (max-width: 576px) {
    .table-responsive table .text-truncate {
        max-width: 140px;
    }
}

/* Containers com max-width fixo em px (usados em vários formulários)
   precisam encolher em telas menores que o próprio max-width. */
.container[style*="max-width"] {
    width: 100%;
}

/* Gráficos (Chart.js) — impede que a altura fixa vaze verticalmente
   em telas muito estreitas onde a largura encolhe bastante. */
@media (max-width: 400px) {
    canvas { max-height: 220px !important; }
}

@media (max-width: 380px) {
    .tela-auth { margin: 1.5rem auto; }
}