/* mobile.css — camada de toque do GT Maria da Penha
   ------------------------------------------------------------------
   O sistema tem dois publicos com aparelhos diferentes: o administrador,
   que trabalha no PC da companhia, e o policial da viatura (e a propria
   protegida, no botao do panico), que trabalha no celular — muitas vezes
   com luva, com sol no visor e uma mao só.

   Regra deste arquivo: nada aqui pode alterar o que se ve no PC (>= 992px)
   nem o que sai no papel. Toda regra esta dentro de @media screen, porque
   os relatorios sao impressos em A4 a partir do mesmo CSS: se houvesse
   regra de layout sem "screen", ela entraria no PDF.
   ------------------------------------------------------------------
   Os numeros de referência saem da medicao feita no navegador sem cabeca
   (Edge, 390x844): transbordo horizontal, alvo de toque abaixo de 40px e
   campo com fonte menor que 16px — que faz o iOS dar zoom no campo.
*/

:root {
    --toque-min: 44px;      /* minimo recomendado para dedo (Apple HIG / WCAG 2.5.5) */
    --toque-minimo: 40px;   /* abaixo disto o policial erra o alvo dentro da viatura */
}

/* ---------- faixa compacta no topo: barra lateral que vira cabecalho ---------- */
.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* Linha de identidade que fica visivel mesmo com o menu fechado.
   Numa viatura o aparelho e compartilhado: sem o nome na tela, o policial
   nao sabe de quem aquela sessao e — e o sistema grava quem registrou cada
   visita. O bloco completo (user-info) se oculta no celular; este resumo nao. */
.sidebar-compacto {
    display: none;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
    line-height: 1.2;
    padding: 2px 0 0;
    min-width: 0;
}

.sidebar-compacto b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.sidebar-compacto .tag {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================ CELULAR ============================ */
@media screen and (max-width: 767.98px) {

    /* CAUSA RAIZ do azul desproporcional: o .row do Bootstrap e "display:flex"
       e, por padrao, estica todos os itens da mesma linha para a altura do
       maior deles (align-items: stretch). Como no mobile as classes
       col-md-3/col-md-9 nao tem efeito (so valem a partir de 768px), a
       sidebar e o conteudo viram itens de flex "soltos" e a sidebar acaba
       esticando para acompanhar a altura do conteudo (que e bem maior).
       A correcao e transformar essa linha em blocos empilhados no mobile. */
    .container-fluid > .row {
        display: block;
    }

    .container-fluid > .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }

    /* A barra lateral vira uma faixa compacta, nao ocupa mais a tela inteira */
    .sidebar {
        min-height: auto !important;
        height: auto !important;
        position: sticky;
        top: 0;
        z-index: 1030;
        padding: calc(8px + env(safe-area-inset-top)) 14px 8px !important;
    }

    .sidebar-top h5 {
        text-align: left !important;
        padding: 8px 0 !important;
        margin: 0;
        font-size: 1rem;
    }

    .sidebar-toggle {
        display: inline-flex;
    }

    /* Menu (card do usuario + links) no celular: fechado ate tocarem no botao,
       exatamente como era antes. A faixa de identidade compacta que ficou aqui
       por uma rodada foi retirada por pedido da GT — ela tomava 44px do topo, e
       no celular o espaco acima do conteudo e o que menos sobra. O card volta a
       aparecer junto com o menu, entao nada fica escondido demais: quem quer ver
       de quem e a sessao toca no botao. */
    .sidebar-menu {
        display: none;
        padding-top: 8px;
    }

    .sidebar-menu.mostrar {
        display: block;
    }

    .sidebar .nav-link {
        padding: 10px 12px;
        min-height: var(--toque-min);
        display: flex;
        align-items: center;
    }

    /* A faixa nao e mais gerada em HTML (functions.php), mas a classe continua
       aqui com display:none de proposito: se alguem reusar o nome, ela nao volta
       a ocupar a barra do celular sozinha. */
    .sidebar-compacto {
        display: none;
    }

    /* O card de identidade e o bloco grande, e ele mora dentro do menu — que fica
       fechado ate o toque no botao. Com o menu aberto ele aparece inteiro, com
       foto, nome, patente e companhia (a companhia entrou na linha de baixo do
       proprio card, em functions.php). */
    .sidebar .user-info {
        display: block;
    }

    /* ---- conteudo: nao deixar a folha encostar na borda da tela ---- */
    .main-content,
    .app-main,
    main {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    }

    .card-body {
        padding: 14px !important;
    }

    h1,
    .page-title,
    .display-1,
    .display-2,
    .display-3,
    .display-4 {
        font-size: 1.45rem !important;
        line-height: 1.25;
    }

    h2 {
        font-size: 1.2rem !important;
    }

    h3,
    h4,
    h5 {
        font-size: 1.02rem !important;
    }

    .page-hero {
        padding: 1rem 1.1rem !important;
    }

    .page-hero .btn {
        width: 100%;
    }

    /* ---- campos: 16px e o minimo para o iOS nao dar zoom ao focar ---- */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;      /* ha font-size inline nas paginas: sem important nao vale */
    }

    .form-control,
    .form-select {
        min-height: var(--toque-min);
    }

    .form-control-sm {
        min-height: var(--toque-min);
        padding-top: .45rem;
        padding-bottom: .45rem;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
    }

    .form-check-label {
        padding: .3rem .35rem;
    }

    .input-group > .btn {
        flex: 0 0 auto;
    }

    /* ---- alvos de toque ---- */
    .btn {
        min-height: var(--toque-min);
    }

    .btn-sm {
        min-height: var(--toque-minimo);
        min-width: var(--toque-minimo);   /* os botoes de icone da agenda mediam 32x40:
                                             a seta de "mes anterior" era mais estreita
                                             que a ponta de um dedo */
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: .88rem !important;
    }

    .btn-close {
        padding: 12px;
        background-clip: content-box;
    }

    a.alert-link {
        display: inline-flex;
        align-items: center;
        min-height: var(--toque-minimo);
        padding: .4rem .55rem;
        margin: -.4rem -.55rem;   /* nao aumenta o espaco entre as linhas, so a area util */
    }

    .list-group-item {
        padding-top: .8rem;
        padding-bottom: .8rem;
    }

    .pagination .page-link {
        min-height: var(--toque-minimo);
        min-width: var(--toque-minimo);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* O "hover" de mesa fica grudado no toque: o cartao sobe e nao volta.
       Em aparelho sem mouse, o efeito nao existe. */
    .stat-card:hover,
    .visit-card:hover {
        transform: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    /* ---- tabelas largas: em celular viram cartoes empilhados ----
       A listagem de vitimas tem 7 colunas e 688px de largura real: dentro do
       cartao nao ha como rolar aquilo com um dedo, e a coluna "Acoes" (editar,
       renovar, inativar) fica do outro lado da tela. Aqui cada linha vira um
       cartao e cada celula passa a ter o rotulo do cabecalho ao lado, lido do
       atributo data-rotulo que o HTML carrega para este fim. */
    table.tabela-em-cartao {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 .6rem;
        margin-bottom: 0;
    }

    table.tabela-em-cartao > thead {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
        padding: 0;
        margin: -1px;
    }

    table.tabela-em-cartao,
    table.tabela-em-cartao > tbody,
    table.tabela-em-cartao > tbody > tr,
    table.tabela-em-cartao > tbody > tr > td,
    table.tabela-em-cartao > tbody > tr > th {
        display: block;
        width: auto;
    }

    table.tabela-em-cartao > tbody > tr {
        background: #fff;
        border: 1px solid var(--app-border, #e5ebf3);
        border-radius: 12px;
        padding: .35rem .75rem .5rem;
        box-shadow: 0 1px 2px rgba(16, 32, 58, .06);
    }

    table.tabela-em-cartao > tbody > tr:hover {
        background: #fff;
    }

    table.tabela-em-cartao > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .9rem;
        padding: .3rem 0;
        border: 0;
        border-bottom: 1px dashed #eef2f7;
        text-align: right;
    }

    table.tabela-em-cartao > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    table.tabela-em-cartao > tbody > tr > td::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        max-width: 45%;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--app-muted, #66758a);
        text-align: left;
    }

    table.tabela-em-cartao > tbody > tr > td:not([data-rotulo])::before {
        content: none;
    }

    /* Um selo de texto longo nao cabe ao lado do rotulo: .badge chega do Bootstrap
       com white-space: nowrap e, em modo cartao, a celula e flex — o selo nao
       encolhe e empurra a linha inteira para fora da tela (medido: 453px de
       conteudo numa tela de 390px, e o rotulo "Acoes" do outro lado). Deixar o
       selo quebrar linha resolve no toque sem tocar no PC nem no papel: isto so
       existe dentro de @media screen. */
    table.tabela-em-cartao > tbody > tr > td .badge {
        white-space: normal;
        max-width: 100%;
        line-height: 1.35;
    }

    /* o rotulo da celula nao pode brigar com o conteudo pelo espaco */
    table.tabela-em-cartao > tbody > tr > td::before {
        flex: 0 1 auto;
    }

    table.tabela-em-cartao > tbody > tr > td.text-end {
        text-align: right;
    }

    table.tabela-em-cartao > tbody > tr > td .btn + .btn {
        margin-left: .3rem;
    }

    /* As listagens vem dentro de card-body com altura maxima e rolagem propria
       (para a pagina nao virar um perereco no PC). Duas barras de rolagem uma
       dentro da outra no toque e a pior combinacao possivel: em celular a caixa
       externa passa a rolar junto com a pagina. */
    .card-body[style*="overflow-y"] {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Celula que carrega mais de uma linha (nome + codigo + cia) continua
       multi-linha no cartao; so nao deixa o conteudo colar na borda. */
    table.tabela-em-cartao > tbody > tr > td {
        row-gap: .15rem;
    }

    .card-body.p-0 {
        padding: 10px !important;
    }

    /* Onde a tabela nao virou cartao (tabelas pequenas, de apoio), ela pelo
       menos desliza sozinha sem arrastar a pagina inteira para o lado. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .table thead th {
        position: static;    /* o cabecalho fixo do style.css se soltava do scroll e ficava por cima da barra sticky */
    }

    /* ---- modal: no celular a janela e a tela ---- */
    .modal-dialog:not(.modal-fullscreen-sm-down) .modal-body {
        max-height: 66vh;
        overflow: auto;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
    }

    /* ---- avisos flutuantes: no rodape, para nao brigar com a barra sticky ---- */
    .toast-container {
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
        left: 12px;
        right: 12px;
    }

    .toast {
        min-width: 0;
        width: 100%;
    }

    /* ---- botao do panico (modulo da protegida) ---- */
    .vitima-container {
        max-width: 100%;
        margin: 14px auto !important;
        padding: 0 10px;
    }

    /* A tela de codigo da protegida tinha margem de 100px no topo: num celular
       de 667pt de altura isso empurra o campo para fora da vista e a primeira
       coisa que ela ve ao abrir e vazio. */
    .login-box {
        max-width: 100%;
        margin: 20px auto !important;
    }

    .btn-alerta,
    .btn-seguro {
        width: 100%;
        font-size: 1.05rem;
        padding: 1.1rem 1rem;
        min-height: 56px;
    }

    /* O campo de GPS e um botao de texto pequeno ao lado do "localizar": sem
       altura minima, ela toca ao lado e nao acontece nada. */
    .gps-btn {
        display: inline-flex;
        align-items: center;
        min-height: var(--toque-min);
        padding: .4rem .7rem;
    }

    /* ---- agenda ----
       Duas coisas aqui, ambas medidas no navegador, nao deduzidas:
       1) as sete colunas do calendario somavam 398px dentro de uma caixa de 366
          (o item de grid tem min-width:auto, entao um titulo comprido abre a
          coluna do sabado para 88px). minmax(0,1fr) e o que devolve a grade ao
          tamanho da tela;
       2) o CSS da pagina reduz os eventos a uma barra de 8px no celular, que e
          bonito e impossivel de tocar. Viram barra de 24px; a lista "Proximas
          atividades", logo abaixo do calendario, continua sendo onde se le o
          texto inteiro. */
    .calendar-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        column-gap: 3px;
    }

    .calendar-day {
        min-height: 74px !important;
        min-width: 0;
        overflow: hidden;
        /* Numa grade de sete colunas em 390px cada dia tem ~52px. O recheio que
           a pagina poe em volta deixava o chip do evento com 39px de largura —
           menos que a unha do polegar. Tirando recheio o chip encosta nas
           paredes do dia e chega a ~48px; nao ha como dar 44x44 a um evento
           dentro de um mes de sete colunas, e a lista "Proximas atividades"
           abaixo do calendario e que carrega o texto inteiro. */
        padding: 2px !important;
    }

    .agenda-event {
        font-size: .58rem !important;
        height: auto !important;
        min-height: 24px;
        padding: .18rem .3rem !important;
        line-height: 1.15;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

/* ====================== TABLET / CELULAR DEITADO ====================== */
/* Numa faixa a parte (768–991px) o Bootstrap ja mostra as colunas: o que falta
   e area de toque. E onde a administracao abre o sistema no tablet. */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .sidebar {
        padding: 14px 10px;
    }

    .sidebar .nav-link {
        min-height: var(--toque-min);
        display: flex;
        align-items: center;
    }

    .sidebar .user-info {
        padding: 10px;
        margin: 12px 0;
    }

    .sidebar .user-info .avatar {
        font-size: 28px;
    }

    .btn,
    .btn-sm {
        min-height: var(--toque-minimo);
    }

    .btn {
        min-height: var(--toque-min);
    }

    /* Na faixa do tablet as tabelas continuam tabelas (o modo cartao vale ate
       767px), e a pagina de visitas tem ali 14 botoes de icone de 32x40: a
       altura ja estava certa, faltava a largura. */
    .btn-sm {
        min-width: var(--toque-minimo);
    }

    a.alert-link {
        display: inline-flex;
        align-items: center;
        min-height: var(--toque-minimo);
        padding: .35rem .5rem;
    }

    .table thead th {
        position: static;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-card .stat-number {
        font-size: 24px;
    }
}

/* ============================ PC / IMPRESSAO ============================ */
@media screen and (min-width: 768px) {
    /* Em telas maiores, o comportamento continua sendo o de sempre */
    .sidebar-toggle {
        display: none !important;
    }

    .sidebar-menu {
        display: block !important;
    }

    .sidebar-compacto {
        display: none !important;
    }
}

/* ---------- caixa alta nos campos de texto (16/09, comando da noite) ----------
   A face visual da regra: o que se ve ao digitar, colar e no autofill é
   maiúsculo — e o caixa-alta.js riscá o .value na mesma moeda, para o POST
   sair como a tela mostra. Este arquivo é o único CSS que TODAS as páginas
   carregam (até index.php e o módulo da vítima, que nem veem style.css),
   então a régua mora aqui. email/senha não entram — credencial não é campo
   de texto, é chave; datar o login seria porta de exclusão silenciosa.
   Dentro de @media screen: nos formulários ninguém imprime input, mas a
   regra do arquivo é não tocar no papel nem por curiosidade. */
@media screen {
    input[type="text"],
    input[type="tel"],
    input[type="search"],
    input:not([type]),
    textarea {
        text-transform: uppercase;
    }
}