/* ============================================================
   MOBILE.CSS — base responsiva global (celular / tablet em pé)
   ------------------------------------------------------------
   Incluído por último no <head> de todas as páginas do sistema,
   pra conseguir sobrescrever o CSS próprio de cada tela.

   REGRA DE OURO: tudo aqui fica dentro de @media (max-width: 768px).
   No desktop (e em notebook com zoom alto) nada deste arquivo se
   aplica — o visual atual não muda.

   Ajustes específicos de cada tela ficam no fim do .css da própria
   tela, também dentro de @media (max-width: 768px).
   Complemento em JS: static/js/mobile.js (envolve tabelas soltas
   num container com rolagem horizontal).
   ============================================================ */

/* ---------- Componente "Opções" (menu suspenso de botões) ----------
   Uso: <div class="mobile-opcoes">
          <button type="button" class="btn btn-primary mobile-opcoes-btn">Opções</button>
          <div class="mobile-opcoes-lista"> ...botões da tela... </div>
        </div>
   Desktop: o botão "Opções" some e a lista aparece como sempre.
   Celular: a lista vira um menu suspenso (abre/fecha no mobile.js). */
.mobile-opcoes-btn { display: none; }

/* Botão "Abrir / Baixar PDF" sobre os iframes de relatório (criado pelo
   mobile.js só no celular — no desktop nem existe). */
.mobile-pdf-abrir { display: none; }

/* Abas com data-mobile-select viram <select> no celular (mobile.js) */
.mobile-abas-select { display: none; }

/* ---------- Componente "Recolher" (ex.: Opções de Busca) ----------
   Uso: <div class="mobile-recolher">
          <button type="button" class="mobile-recolher-btn">Título <i class="mobile-recolher-seta"></i></button>
          <div class="mobile-recolher-conteudo"> ... </div>
        </div>
   Desktop: o botão some e o conteúdo aparece como sempre.
   Celular: conteúdo recolhido; o botão abre/recolhe (mobile.js). */
.mobile-recolher-btn { display: none; }

@media (max-width: 768px) {

    /* ---------- Base ---------- */
    html { -webkit-text-size-adjust: 100%; }

    /* Rede de segurança: nenhum elemento largo demais pode alargar a página
       inteira (isso faz o celular "afastar o zoom" e desalinha modais e fundo).
       Só no body — no html criaria um contêiner de rolagem e quebraria sticky. */
    body { overflow-x: hidden; }

    img, video, canvas, iframe { max-width: 100%; }

    .container,
    .container-fluid,
    .page-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    h1, .h1 { font-size: 1.35rem; }
    h2, .h2 { font-size: 1.2rem; }
    h3, .h3 { font-size: 1.1rem; }

    /* Zoom automático do iPhone ao focar campo: resolvido no mobile.js
       (maximum-scale=1 só no iOS) — os campos mantêm a fonte da própria tela
       em vez de forçar 16px, que deixava tudo grande demais. */

    /* ---------- Menu: botão ☰ flutuante em vez da barra fixa ----------
       A barra (.fixed-navbar, montada pelo menu-loader.js) deixa de ocupar
       56px no topo: vira só um botão redondo no canto superior direito, e o
       menu abre como um painel por cima do conteúdo. O menu-styles.css
       continua valendo entre 769px e 991px (tablet deitado / janela estreita). */
    body { padding-top: 6px !important; }

    .fixed-navbar {
        left: auto !important;
        right: 8px !important;
        top: 8px !important;
        min-height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none;           /* área vazia não bloqueia toques */
    }
    .fixed-navbar .container,
    .fixed-navbar .container-fluid {
        padding: 0 !important;
    }
    .fixed-navbar .navbar-toggler {
        pointer-events: auto;
        width: 42px;
        height: 42px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50%;
        /* semitransparente: deixa ver o conteúdo por trás; fica sólido ao tocar/abrir */
        background-color: rgba(26, 64, 112, .55);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
        transition: background-color .15s;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .fixed-navbar .navbar-toggler:active,
    .fixed-navbar .navbar-toggler[aria-expanded="true"] {
        background-color: #1a4070;
    }
    .fixed-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(26, 64, 112, .35); }
    .fixed-navbar .navbar-toggler-icon {
        /* ícone ☰ branco (o padrão do Bootstrap é cinza escuro) */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* Painel do menu aberto: por cima do conteúdo, rola se for comprido */
    .fixed-navbar .navbar-collapse {
        pointer-events: auto;
        position: fixed;
        top: 58px;
        left: 8px;
        right: 8px;
        width: auto !important;
        margin-top: 0 !important;
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px);  /* iPhone: altura visível real (sem as barras do Safari) */
        overflow-y: auto;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
        padding: 6px 10px !important;
    }

    /* ---------- Painel do menu aberto: fonte maior, mesma altura ----------
       Itens com letra um pouco maior e menos espaço vertical (altura igual),
       seta do submenu alinhada à direita, divisória fina entre os itens,
       "🏠 Início" com texto e nome do usuário ao lado do Sair. */
    .fixed-navbar .navbar-nav .nav-link {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        font-size: 1.02rem !important;
        font-weight: 600;
        color: #1a4070 !important;
        padding: 0.45rem 0.6rem !important;
        border-radius: 6px;
    }
    .fixed-navbar .navbar-nav .nav-link:active,
    .fixed-navbar .navbar-nav .nav-link.show { background: rgba(255, 255, 255, .45); }
    .fixed-navbar .navbar-nav > .nav-item + .nav-item { border-top: 1px solid rgba(26, 64, 112, .12); }
    .fixed-navbar .navbar-nav .dropdown-toggle::after {
        margin-left: auto;
        transition: transform .2s;
    }
    .fixed-navbar .navbar-nav .dropdown-toggle.show::after { transform: rotate(180deg); }
    .fixed-navbar .menu-inicio .nav-link { justify-content: flex-start; gap: 8px; }
    .fixed-navbar .menu-inicio .nav-link::after { content: 'Início'; }

    /* Submenu aberto: caixa clara, recuada, itens um pouco menores */
    .fixed-navbar .dropdown-menu {
        background: rgba(255, 255, 255, .55) !important;
        border-radius: 8px !important;
        margin: 2px 0 6px !important;
        padding: 4px 0 !important;
    }
    .fixed-navbar .dropdown-item {
        font-size: 0.95rem !important;
        padding: 0.4rem 1rem !important;
        color: #212529;
    }

    /* Rodapé do painel: nome do usuário à esquerda, Sair à direita */
    .fixed-navbar .ms-auto { justify-content: space-between !important; }
    .fixed-navbar #menuUserName {
        display: inline-block !important;
        font-size: 0.85rem;
        color: #1a4070 !important;
        margin: 0 !important;
    }

    /* ---------- Cabeçalhos de página / barras de botões ---------- */
    .page-header,
    .aba-toolbar,
    .btn-toolbar,
    .avs-btn-toolbar,
    .admin-toolbar,
    .ajuste-toolbar,
    .btn-actions,
    .admin-subform-actions,
    .botoes-form-card,
    .modal-footer {
        flex-wrap: wrap !important;
        gap: 6px;
        height: auto !important;
    }

    .page-header__left,
    .page-header__right {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .toolbar-separator,
    .avs-toolbar-separator { display: none !important; }

    /* ---------- Componente "Opções" (ver topo do arquivo) ---------- */
    .mobile-opcoes { position: relative; }
    .mobile-opcoes-btn { display: inline-flex; align-items: center; gap: 6px; }
    .mobile-opcoes-lista {
        display: none !important;
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        z-index: 1020;
        min-width: 250px;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        background: #fff;
        border: 1px solid #dde1e8;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    }
    .mobile-opcoes-lista.aberto { display: flex !important; }
    .mobile-opcoes-lista.mobile-opcoes-direita { left: auto !important; right: 0; }
    .mobile-opcoes-lista > .btn {
        text-align: left;
        margin: 0 !important;
        white-space: nowrap;
    }

    /* ---------- Botão "Abrir / Baixar PDF" (ver mobile.js) ---------- */
    .mobile-pdf-box { position: relative; }
    /* No TOPO do quadro: o Safari do iPhone estica o iframe até a altura do
       PDF inteiro (ignora o height do CSS) — embaixo o botão sumia. */
    .mobile-pdf-abrir {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: absolute;
        right: 12px;
        top: 10px;
        z-index: 5;
        padding: 9px 16px;
        border: 0;
        border-radius: 22px;
        /* semitransparente (padrão dos botões flutuantes); sólido ao tocar */
        background: rgba(26, 64, 112, .6);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
        transition: background-color .15s;
    }
    .mobile-pdf-abrir:active { background: #1a4070; }

    /* ---------- Coluna "Ações" → botão "⋮" + menu (mobile.js) ---------- */
    td[data-mobile-acoes] { text-align: center; }
    .mobile-acoes-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 30px;
        padding: 0;
        border: 1px solid #dde1e8;
        border-radius: 6px;
        background: #fff;
        color: #1a4070;
    }
    .mobile-acoes-toggle[aria-expanded="true"] { background: #1a4070; color: #fff; }
    /* Botões originais: guardados (ocultos) na célula */
    .mobile-acoes-menu { display: none !important; }
    /* Menu aberto: desenhado no <body> (mobile.js) — o Safari do iPhone
       recortava o menu dentro da área de rolagem da tabela */
    .mobile-acoes-flutuante {
        display: flex;
        position: fixed;
        z-index: 20000;
        min-width: 180px;
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        background: #fff;
        border: 1px solid #dde1e8;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
        text-align: left;
        white-space: normal;
    }
    .mobile-acoes-flutuante button,
    .mobile-acoes-flutuante a.btn {
        width: 100%;
        margin: 0 !important;
        text-align: left;
        justify-content: flex-start;
    }
    /* botão só de ícone: nome da ação ao lado (data-rotulo, ver mobile.js) */
    .mobile-acoes-flutuante .mobile-acoes-so-icone {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
    .mobile-acoes-flutuante .mobile-acoes-so-icone::after {
        content: attr(data-rotulo);
        font-size: .82rem;
        font-weight: 600;
    }

    /* ---------- iPhone: data curta DD/MM/AA (mobile.js, item 8) ---------- */
    .mobile-data-curta-caixa {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
    }
    /* sem a aparência nativa o campo de data do iPhone respeita a largura
       da coluna (senão tem largura mínima própria e invade o vizinho) */
    .mobile-data-curta-caixa > input {
        width: 100%;
        min-width: 0;
        min-height: 34px;
        -webkit-appearance: none;
        appearance: none;
    }
    /* texto nativo ("21 de set. de 2026") invisível só quando há data */
    input.mobile-data-curta-ativa {
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }
    .mobile-data-curta-texto {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        padding: 0 8px;
        pointer-events: none;   /* o toque passa pro campo: abre o calendário */
        font-size: 14px;
        color: #212529;
        white-space: nowrap;
        overflow: hidden;
    }
    .mobile-data-curta-desab .mobile-data-curta-texto { color: #6c757d; }

    /* ---------- Componente "Recolher" (ver topo do arquivo) ---------- */
    .mobile-recolher-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .mobile-recolher-seta { transition: transform .2s; }
    .mobile-recolher.aberto .mobile-recolher-seta { transform: rotate(180deg); }
    .mobile-recolher:not(.aberto) > .mobile-recolher-conteudo { display: none !important; }
    .mobile-recolher.aberto > .mobile-recolher-conteudo { margin-top: 10px; }

    /* ---------- Abas → lista suspensa (data-mobile-select) ---------- */
    [data-mobile-select] { display: none !important; }
    .mobile-abas-select {
        display: block;
        width: 100%;
        margin-bottom: 12px;
        font-weight: 600;
        color: #1a4070;
        border-color: #1a4070;
    }

    /* ---------- Abas: quebram linha (todas sempre visíveis) ----------
       Rolar pro lado escondia abas sem nenhuma pista visual no celular. */
    .nav-tabs,
    .admin-tabs {
        flex-wrap: wrap !important;
    }
    .nav-tabs .nav-link {
        padding: .4rem .6rem !important;
        font-size: .82rem !important;
    }

    /* ---------- Tabelas: rolagem horizontal dentro do container ---------- */
    .table-responsive,
    .table-container,
    .table-wrapper,
    .mobile-table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .mobile-table-scroll { width: 100%; }

    /* Células em uma linha só: a coluna alarga e a tabela rola pro lado,
       em vez de o texto quebrar em 4-5 linhas e a linha ficar altíssima. */
    .table-responsive table td,
    .table-responsive table th,
    .table-container table td,
    .table-container table th,
    .table-wrapper table td,
    .table-wrapper table th,
    .mobile-table-scroll table td,
    .mobile-table-scroll table th {
        white-space: nowrap;
    }
    /* Exceção: tabela com poucas colunas que deve caber na largura da tela,
       quebrando o texto (ex.: Postos de Trabalho Ativos em terceirizados).
       Uso: <table class="... mobile-quebra-linha">. A última coluna fica em
       uma linha só (costuma ser curta: posto, status, botão). */
    table.mobile-quebra-linha { width: 100% !important; }
    .table-responsive table.mobile-quebra-linha td,
    .table-responsive table.mobile-quebra-linha th,
    .table-container table.mobile-quebra-linha td,
    .table-container table.mobile-quebra-linha th,
    .table-wrapper table.mobile-quebra-linha td,
    .table-wrapper table.mobile-quebra-linha th,
    .mobile-table-scroll table.mobile-quebra-linha td,
    .mobile-table-scroll table.mobile-quebra-linha th {
        white-space: normal;
    }
    table.mobile-quebra-linha tr > :last-child { white-space: nowrap !important; }

    /* Com texto em uma linha, tabela de layout fixo (larguras em %) faz o
       texto de uma coluna invadir a outra — aqui a largura segue o conteúdo. */
    .table-responsive table,
    .table-container table,
    .table-wrapper table,
    .mobile-table-scroll table {
        table-layout: auto !important;
    }

    .table > :not(caption) > * > *,
    table td,
    table th {
        font-size: .82rem;
    }

    /* Coluna "Ações" fixa à direita (marcada pelo mobile.js) — os dados
       rolam pro lado, os botões ficam sempre à mão. */
    table.mobile-col-acoes-fixa tr > :last-child:not([colspan]) {
        position: sticky;
        right: 0;
        z-index: 1;
        background-color: #fff;
        box-shadow: -3px 0 5px -2px rgba(0, 0, 0, .15);
    }
    table.mobile-col-acoes-fixa thead tr > :last-child {
        z-index: 2;
        background-color: #f4f6f9;
    }

    /* ---------- Formulários em grid (padrão Contratos) ---------- */
    .form-grid--3,
    .form-grid--4,
    .form-grid--5 { grid-template-columns: 1fr 1fr !important; }

    .form-grid--liq1 { grid-template-columns: 1fr 1fr !important; }

    /* ---------- Cards ---------- */
    .card-body { padding: .75rem; }

    /* ---------- Modais Bootstrap ---------- */
    .modal-dialog {
        margin: .4rem auto !important;
        max-width: calc(100vw - .8rem) !important;
    }
    /* Overlay dos modais na altura VISÍVEL: no Safari do iPhone, height:100%
       de um elemento fixo inclui a área atrás das barras do navegador —
       o fim do modal ficava escondido e não rolava. */
    .modal { height: 100vh; height: 100dvh; }
    /* Modal "rolável" do Bootstrap: sempre a altura da tela (não muda de
       tamanho conforme a aba/conteúdo) e só o miolo rola. */
    .modal-dialog-scrollable {
        height: calc(100vh - .8rem) !important;
        height: calc(100dvh - .8rem) !important;
        min-height: 0 !important;
    }
    .modal-dialog-scrollable .modal-content {
        height: 100%;
        max-height: 100% !important;
    }
    .modal-dialog-scrollable .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-body { padding: .75rem; }
    .modal-header { padding: .6rem .75rem; }

    /* ---------- Modais customizados (overlays não-Bootstrap) ----------
       Várias telas definem largura fixa em px no -content; aqui a
       largura passa a caber na tela e a altura rola por dentro. */
    .modal-content,
    .modal-cnh-content,
    .modal-rel-content,
    .modal-relatorio-content,
    .modal-relatorio-pdf-content,
    .modal-diarias-content,
    .modal-editar-diaria-content,
    .modal-pdf-diarias-content {
        max-width: calc(100vw - .8rem) !important;
        min-width: 0 !important;
    }
    .modal-cnh-content,
    .modal-rel-content,
    .modal-relatorio-content,
    .modal-relatorio-pdf-content,
    .modal-diarias-content,
    .modal-editar-diaria-content,
    .modal-pdf-diarias-content {
        width: calc(100vw - .8rem) !important;
        max-height: calc(100vh - .8rem);
        max-height: calc(100dvh - .8rem); /* iPhone: altura visível real (sem as barras do Safari) */
        overflow-y: auto;
    }

    /* Cabeçalho (título + X) sempre visível e rodapé (Salvar/Cancelar)
       sempre à mão quando o formulário é mais alto que a tela: só o miolo
       rola. Vale pra modal Bootstrap e pros overlays customizados em que o
       próprio -content rola (ex.: gestao_passagens_aereas). */
    .modal-content .modal-header,
    .modal-relatorio-header,
    .modal-cnh-header {
        position: sticky;
        top: 0;
        z-index: 5;
    }
    .modal-content .modal-footer {
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
    /* Fundo só onde a tela não definiu nenhum (especificidade zero via
       :where — qualquer cor própria da tela, ex. header navy, prevalece). */
    :where(.modal-content .modal-header),
    :where(.modal-content .modal-footer) {
        background-color: #fff;
    }
    /* O Bootstrap 5.3 já põe no .modal-footer um
       background-color: var(--bs-modal-footer-bg), com a variável vazia
       (= transparente), e isso vence o :where acima. Preenchendo a variável,
       o rodapé fixo fica branco sem brigar com cores próprias das telas. */
    .modal-content {
        --bs-modal-footer-bg: #fff;
    }

    /* Arrastar modal não faz sentido no toque (ver modal-drag.js) */
    .modal-header,
    .modal-cnh-header,
    .modal-relatorio-header { cursor: default !important; }
}

/* Celular (retrato) — formulários em uma coluna */
@media (max-width: 576px) {
    .form-grid--2,
    .form-grid--3,
    .form-grid--4,
    .form-grid--5,
    .form-grid--liq1 { grid-template-columns: 1fr !important; }

    .form-group--span2 { grid-column: auto !important; }

    /* Colunas Bootstrap dentro de modal/form viram coluna única */
    .modal-body .row > [class*="col-"],
    form .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .modal-footer > .btn,
    .botoes-form-card > .btn {
        flex: 1 1 auto;
    }
}