/* Intranet no celular (17/08/2026).
   Até então o layout forçava width=1280 na meta viewport e o telefone abria tudo
   em "modo computador". Com o viewport real, este arquivo cuida do que o CSS
   principal não previa em telas estreitas: nada estoura para o lado, tabela
   larga rola dentro do próprio quadro, cartões e filtros empilham, modal cabe
   na tela. Regras só até 991px (celular e tablet em pé); no desktop nada muda. */

@media (max-width: 991.98px) {
    html, body { max-width: 100vw; overflow-x: hidden; }
    body .wrapper .content-page { overflow-x: hidden; }
    body .content-page .content { padding-left: 0; padding-right: 0; }
    body .content-page .container-fluid { padding-left: 10px; padding-right: 10px; }

    /* Texto e mídia nunca forçam a largura */
    .content-page { word-wrap: break-word; overflow-wrap: anywhere; }
    .content-page img, .content-page iframe, .content-page video, .content-page canvas, .content-page svg { max-width: 100%; height: auto; }
    .content-page pre { max-width: 100%; overflow-x: auto; }

    /* Tabela larga: rola dentro do quadro (não empurra a página) */
    .content-page .table-responsive { -webkit-overflow-scrolling: touch; }
    .content-page table.table:not(.no-mobile-scroll) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .content-page table.table th { white-space: nowrap; }

    /* Cabeçalho de card com botões: quebra a linha em vez de estourar */
    .content-page .card-header, .content-page .card-header .d-flex { flex-wrap: wrap; gap: .5rem; }
    .content-page .card-header h1, .content-page .card-header h2, .content-page .card-header h3,
    .content-page .card-header h4, .content-page .card-header h5 { font-size: 1.02rem; margin: 0; }
    .content-page .btn-toolbar, .content-page .btn-group { flex-wrap: wrap; }
    .content-page .btn { white-space: normal; }

    /* Filtros e barras de ação empilham */
    .content-page .form-inline, .content-page .form-row { flex-wrap: wrap; }
    .content-page .form-inline .form-control, .content-page .form-inline .form-select,
    .content-page .form-inline .btn { width: 100%; margin: .2rem 0; }
    .content-page .input-group { flex-wrap: wrap; }
    .content-page .input-group > .form-control, .content-page .input-group > .form-select { min-width: 0; }

    /* Títulos e saudação */
    .content-page .user-greeting-block h1, .content-page .user-greeting-block h2 { font-size: 1.1rem; }
    .content-page h1 { font-size: 1.35rem; }
    .content-page h2 { font-size: 1.2rem; }
    .content-page h3 { font-size: 1.08rem; }

    /* Modais cabem na tela */
    .modal-dialog { margin: .5rem auto; max-width: calc(100vw - 1rem) !important; width: auto; }
    .modal-body { max-height: calc(100vh - 12rem); overflow-y: auto; }
    .modal-footer { flex-wrap: wrap; gap: .4rem; }

    /* Botão flutuante e rodapé */
    .content-page .footer, footer.footer { position: static; padding: .6rem 10px; font-size: .78rem; text-align: center; }
    #fala-colaborador-btn, .fala-colaborador-btn { right: 10px !important; bottom: 10px !important; padding: .55rem .9rem !important; font-size: .8rem !important; }

    /* Breadcrumb e paginação quebram a linha em vez de estourar */
    .content-page .breadcrumb, .content-page .pm-breadcrumb { flex-wrap: wrap; row-gap: .2rem; }
    .content-page .breadcrumb .breadcrumb-item { font-size: .82rem; }
    .content-page .pagination { flex-wrap: wrap; row-gap: .3rem; justify-content: center; }

    /* Select2 e DataTables */
    .content-page .select2-container { width: 100% !important; max-width: 100%; }
    .content-page .dataTables_wrapper .dataTables_length,
    .content-page .dataTables_wrapper .dataTables_filter { float: none; text-align: left; margin-bottom: .4rem; }
    .content-page .dataTables_wrapper .dataTables_filter input { width: 100%; margin: 0; }
    .content-page .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
}

@media (max-width: 575.98px) {
    body .content-page .container-fluid { padding-left: 8px; padding-right: 8px; }
    .content-page .card { border-radius: 12px; }
    .content-page .card-body { padding: .8rem; }
    /* Botão de ação em largura total quando é o único da linha */
    .content-page .btn-block, .content-page .w-100-mobile { width: 100%; }
}

/* ---- Menu do celular: botão ☰ na barra do topo + gaveta com todos os itens ----- */
@media (max-width: 991.98px) {
    /* A faixa horizontal com três itens e o ⋮ saem de cena: a gaveta tem tudo. */
    body.sidebarTopMode #sidebar-topmode-nav { display: none !important; }
    body.sidebarTopMode #topmode-secondary-menu { display: none !important; }

    #pm-menu-btn {
        position: absolute; right: 10px; top: 8px;
        width: 44px; height: 40px;
        border: 1px solid #e3e7ee; border-radius: 10px;
        background: #fff; color: var(--pm-primary, #005d90);
        font-size: 1.15rem; line-height: 1;
        display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    #pm-menu-btn:active { background: var(--pm-primary-soft, #eef3f8); }

    #pm-mobile-menu { position: fixed; inset: 0; z-index: 3000; }
    #pm-mobile-menu[hidden] { display: none; }
    #pm-mobile-menu .pm-mm-fundo { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
    #pm-mobile-menu .pm-mm-painel {
        position: absolute; top: 0; left: 0; bottom: 0;
        width: min(330px, 88vw);
        background: #fff;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 12px 12px 28px;
        box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
        display: flex; flex-direction: column;
    }
    #pm-mobile-menu .pm-mm-topo {
        display: flex; align-items: center; justify-content: space-between;
        padding: 4px 6px 12px; border-bottom: 1px solid #e3e7ee; margin-bottom: 8px;
    }
    #pm-mobile-menu .pm-mm-topo strong { font-size: 1.05rem; color: #1f2937; display: block; }
    #pm-mobile-menu .pm-mm-topo small { display: block; color: #6b7280; font-size: .78rem; }
    #pm-mobile-menu .pm-mm-fechar {
        width: 40px; height: 40px; border: 0; border-radius: 10px;
        background: #f3f4f8; color: #1f2937; font-size: 1.5rem; line-height: 1; cursor: pointer;
    }
    #pm-mobile-menu .pm-mm-lista { display: flex; flex-direction: column; gap: 2px; }
    #pm-mobile-menu .pm-mm-link {
        display: flex; align-items: center; gap: 12px;
        padding: 12px 10px; border-radius: 10px;
        color: #1f2937; text-decoration: none; font-weight: 600; font-size: .95rem;
    }
    #pm-mobile-menu .pm-mm-link i { width: 22px; text-align: center; color: var(--pm-primary, #005d90); font-size: 1rem; }
    #pm-mobile-menu .pm-mm-link i.pm-mm-ponto { font-size: .4rem; }
    #pm-mobile-menu .pm-mm-link:active, #pm-mobile-menu .pm-mm-link.is-atual { background: var(--pm-primary-soft, #eef3f8); color: var(--pm-primary, #005d90); }
    #pm-mobile-menu .pm-mm-sep { border-top: 1px solid #e3e7ee; margin: 10px 4px; }
    body.pm-mm-aberto { overflow: hidden; }
}