/*
 * Ajustes de responsividade do sistema.
 * Ajuste pós-Etapa 7: o menu de cima estourava a tela em notebooks e
 * celulares porque faltava o botão "sanduíche" (ver app/Views/layouts/main.php).
 * Este arquivo cuida só de detalhes visuais que o Bootstrap puro não resolve
 * sozinho.
 */

/* Nome da congregação: em telas estreitas, não deixa o texto empurrar o
   botão de menu para fora da tela — trunca com "..." em vez de quebrar. */
.app-brand {
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1200px) {
    .app-brand {
        max-width: 320px;
    }
}

/* Em telas pequenas o menu abre para baixo (collapse) — um respiro maior
   entre os links evita cliques errados no dedo/touch. */
@media (max-width: 1199.98px) {
    #menuPrincipal .nav-link {
        padding-top: .55rem;
        padding-bottom: .55rem;
    }

    #menuPrincipal .dropdown-menu {
        border: 0;
        background: transparent;
        padding-left: 1rem;
    }

    #menuPrincipal .dropdown-item {
        color: rgba(255, 255, 255, .75);
    }

    #menuPrincipal .dropdown-item:hover,
    #menuPrincipal .dropdown-item:focus {
        color: #fff;
        background-color: rgba(255, 255, 255, .1);
    }
}

/* Tabelas largas (listagem de publicadores, relatórios) não devem empurrar
   o layout inteiro para o lado em telas pequenas — cada tabela rola por
   dentro de si mesma. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Módulos Discursos e Publicações (05/10/2026): com mais itens no menu,
   entre 1200px e 1400px (notebooks comuns) os links ficam um pouco mais
   compactos para tudo caber numa linha só, sem estourar a tela. Abaixo de
   1200px o menu vira o botão (☰) — ver navbar-expand-xl no layout. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    #menuPrincipal .nav-link {
        padding-left: .45rem;
        padding-right: .45rem;
        font-size: .92rem;
    }

    .app-brand {
        max-width: 200px;
    }
}