/*--------------------------------------------------------------
# Ajustes exclusivos para celular / tela estreita
--------------------------------------------------------------
Tudo neste arquivo está dentro de @media (max-width: ...), então
nada aqui tem efeito na versão de computador — acima dos
breakpoints abaixo, style.css continua mandando sozinho.
--------------------------------------------------------------*/

/* Fundo escurecido atrás da barra lateral quando ela é aberta pelo ícone
   de menu (☰).

   Vai até 899px, e não até 1199: de 900px para cima a barra fica fixa em
   miniatura e abre no hover, sem cobrir o conteúdo — escurecer a tela
   ali seria escurecer por nada. Ver o bloco "Barra lateral" em
   distribuijus.css. */
/* A definição fica FORA do @media, escondida por padrão. Dentro dela, o
   elemento perdia o "display: none" nas larguras em que a media não casa
   e voltava a ser um <div> comum no fluxo da página — um bloco vazio
   empurrando o conteúdo. Só o "mostrar" depende da largura. */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 60px 0 0 0; /* começa abaixo do cabeçalho fixo (60px) */
    background: rgba(1, 41, 112, 0.35);
    z-index: 995; /* logo abaixo do .sidebar (996) e do .header (997) */
}

@media (max-width: 899.98px) {
    body.toggle-sidebar .sidebar-backdrop {
        display: block;
    }
}

@media (max-width: 767.98px) {
    /* ---- Espaçamento geral: menos ar nas laterais, mais espaço útil ---- */
    #main {
        padding: 14px;
    }

    .card {
        margin-bottom: 14px;
    }

    .card-body {
        padding: 14px;
    }

    .pagetitle h1 {
        font-size: 20px;
    }

    /* ---- Cabeçalho: nome do usuário logado só como ícone, economiza espaço ---- */
    .header-nav .nav-profile span {
        display: none;
    }

    /* ---- Tabelas: viram roláveis (ver .table-responsive nas views) e ---- */
    /*      ganham fonte/preenchimento um pouco menores para caber mais.  ---- */
    .table-responsive table.table,
    #tabelaProcessos {
        font-size: 13px;
    }

    .table-responsive table.table th,
    .table-responsive table.table td,
    #tabelaProcessos th,
    #tabelaProcessos td {
        padding: 8px 6px !important;
    }

    /* Colunas de texto longo (observação, serventia) ficam mais estreitas
       no celular, já que o espaço de tela é menor — o conteúdo completo
       continua acessível pelo toque (abre modal), como no computador. */
    .card-body td[data-observacao],
    .card-body span[data-observacao] {
        max-width: 100px !important;
    }

    /* ---- "Total / Prontos / Pendentes": mais compacto no celular ----
       Os três cartões não cabem lado a lado em 375px, e continuam sem
       quebrar linha: a faixa rola de lado. Encolher a fonte e o padding
       faz caber quase tudo de primeira, e o resto é um arrastão curto. */
    .resumo-processos {
        gap: 8px;
        justify-content: flex-start;
        /* Some com a barra de rolagem, que num arrastão de 30px só suja. */
        scrollbar-width: none;
    }

    .resumo-processos::-webkit-scrollbar {
        display: none;
    }

    .resumo-cartao {
        padding: 6px 10px 6px 9px;
    }

    .resumo-numero {
        font-size: 1.2rem;
    }

    .resumo-rotulo {
        font-size: 0.62rem;
    }

    /* ---- Botões de ação (dropdown de três pontinhos) com área de toque maior ---- */
    .icon.d-flex.justify-content-center {
        padding: 6px 10px;
        font-size: 1.2rem;
    }

    .dropdown-menu .dropdown-item {
        padding: 12px 15px; /* mais alto = mais fácil de acertar o dedo */
    }

    /* ---- Formulários: campos e botões ocupam a largura toda, sem sobra ---- */
    .form-control,
    .form-select {
        font-size: 16px; /* evita o zoom automático do iOS ao focar o campo */
    }

    /* ---- Modais: menos margem nas bordas da tela ---- */
    .modal-dialog {
        margin: 10px;
    }

    /* ---- Caixas "Hoje/Ontem/Esta Semana/..." do relatório de lançados:
       2 por linha (ver col-6 col-md-3 na view) com texto/badge menores
       pra caber sem cortar, como acontecia antes. ---- */
    .list-group-item {
        padding: 8px 10px;
        font-size: 13px;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* ---- Filtros de "Processos Lançados" (dois <select>) empilham no lugar
       de ficarem lado a lado espremidos, e o título vai para cima deles ---- */
    .cabecalho-lancados {
        flex-direction: column;
        align-items: stretch !important;
    }

    .filtros-lancados {
        flex-direction: column;
        width: 100%;
    }

    #filtroDistribuido,
    #filtroServentia {
        width: 100% !important;
    }
}