/*
 * Acabamento do sistema (fonte única): vale para todas as telas.
 * Mantém o visual do Bootstrap escolhido pela Renata; só alinha, dá respiro
 * e deixa tudo confortável no celular.
 */

/* Cabeçalho de página: título à esquerda, ações à direita; quebra no celular. */
.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}
.cabecalho-pagina h3 { margin-bottom: 0; }
.cabecalho-pagina > div:last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Rótulos dos formulários sempre em cima do campo, com o mesmo peso. */
.form-label { font-weight: 500; margin-bottom: .35rem; }
.acoes-formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.5rem;
}
textarea.form-control { min-height: 5.5rem; }

/* Filtros do topo das listas. */
.filtro { max-width: 22rem; }
.filtro-largo { max-width: 40rem; }
.busca { max-width: 32rem; }

/* Links dentro de listas e cartões: sem sublinhado, que pesa a leitura. */
.list-group-item a,
.card-title a,
.card a.fw-bold { text-decoration: none; }
.list-group-item a:hover,
.card-title a:hover { text-decoration: underline; }

/* Cartões: cabeçalho com títulos alinhados e respiro igual. */
.card-header h5, .card-header h6 { font-weight: 600; }
.card-header { padding-top: .75rem; padding-bottom: .75rem; }

/* Quadro (kanban): colunas dividem a largura no computador e rolam no celular. */
.quadro-colunas {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
}
.quadro-coluna { flex: 1 0 15rem; scroll-snap-align: start; }

/* Gantt: o frappe-gantt já rola de lado dentro do cartão (.gantt-container). */
.gantt-container { max-width: 100%; }

/* Nada estoura a largura da tela. */
img, video { max-width: 100%; height: auto; }
.container { overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.25rem; }
    .card-body { padding: 1rem; }
    .quadro-coluna { flex-basis: 82%; }
    .filtro, .filtro-largo, .busca { max-width: none; }
    /* Botões de ação do formulário ocupam a largura toda, fáceis de tocar. */
    .acoes-formulario > * { flex: 1 1 0; }
}