/* Adaptacao para celular do fluxo de LIBERAR LICENCA.
 *
 * Escopo deliberado (2026-08-17): login, lista de estacoes, painel/dialogo da
 * estacao, formulario de licenca e lista de licencas. NAO cobre o laudo -- ver
 * abaixo.
 *
 * COMO ISTO FUNCIONA
 *
 * Este arquivo e carregado por ULTIMO nos layouts main.gsp e notLogged.gsp, e
 * tudo aqui esta dentro de um @media. Fora de celular ele nao produz efeito
 * nenhum, o que mantem o desktop intocado -- que era a condicao para mexer numa
 * interface de 2011 sem poder testar cada tela.
 *
 * POR QUE O LAUDO NAO ESTA AQUI
 *
 * report/print.gsp nao carrega este arquivo, e isso e de proposito. O
 * _print.gsp alimenta ao mesmo tempo a tela do laudo e o PDF do Flying Saucer,
 * que renderiza com "@page { size: 8.77in 6.20in }" e NAO entende @media nem
 * flexbox. Mexer no laudo pelo CSS mudaria o PDF que os clientes recebem.
 *
 * A ARMADILHA DO CABECALHO REPLICADO
 *
 * iPodHeader.js clona o <thead> num <table position:fixed> e copia a largura de
 * cada coluna do original. Isso e incompativel com tabela que rola na
 * horizontal: o clone fica parado enquanto a tabela se move, e as colunas
 * desalinham. Por isso o clone e escondido no celular, e nao consertado --
 * cabecalho grudado vale pouco numa tela de 6 polegadas.
 *
 * O arquivo que estava aqui antes era o mobile.css padrao do Grails 1.3.7,
 * orfao (nenhuma GSP o referenciava) e estilizando .nav e .pagination, classes
 * que este aplicativo nao usa. Foi substituido, nao alterado.
 */

@media screen and (max-width: 700px) {

    /* ------------------------------------------------ cabecalho e navegacao
     * O cabecalho era position:fixed com 111px de altura, e o conteudo
     * compensava com margin-top:104px. Em celular cabecalho fixo disputa espaco
     * com o teclado virtual e come um terco da tela, entao ele rola com a
     * pagina. A compensacao tem de sair junto, senao sobra um vao de 104px. */
    .outer-header {
        position: static;
        height: auto;
        overflow: hidden;
    }
    .main-wrapper {
        margin-top: 0;
        padding: 6px;
    }
    /* O mesmo para a barra de acoes das listas ("Add Stations", contador). */
    .main-header, .sub-header {
        position: static;
        left: auto;
        right: auto;
        height: auto;
        overflow: hidden;
    }

    .logo, .logo img {
        float: none;
        max-width: 100%;
    }

    /* O menu era <ul> horizontal com float:right e itens de 14px numa linha de
     * 13px -- em 375px isso quebra em cima do logo. Vira lista que embrulha,
     * com alvo de toque de 44px, que e o minimo utilizavel com o dedo. */
    .page-menu {
        float: none;
        clear: both;
        margin: 4px 0 0 0;
        border-top: 1px solid #E0E0E0;
    }
    .page-menu ul {
        display: block;
        overflow: hidden;
    }
    .page-menu li {
        float: none;
        display: inline-block;
        height: auto;
        line-height: 1.4;
        margin: 0;
        padding: 12px 14px;
        border-left: 0;
        border-bottom: 1px solid #EEE;
    }
    .page-menu a, .page-menu a.highlight {
        font-size: 16px;
        display: inline-block;
        min-height: 20px;
    }

    /* --------------------------------------------------- dialogos (jQuery UI)
     * ESTE e o bloco que resolve "a janela nao cabe na tela".
     *
     * Os paineis de estacao e de licenca sao dialogos do jQuery UI
     * (.ui-dialog-content, .dialog("close") em application.js) -- nao jqModal
     * nem BounceBox, que era onde eu tinha mirado primeiro. Tres larguras fixas
     * somavam para estourar a tela, e o jQuery UI centraliza escrevendo left e
     * width INLINE em px, calculados a partir da largura da janela:
     *
     *   .ui-dialog                    width: 300px  (em cinco folhas diferentes)
     *   .ui-dialog .ui-dialog-content min-width: 400px
     *   .ui-dialog form               width: 524px
     *
     * Com o conteudo em 524px e a tela em 375, a centralizacao punha o dialogo
     * comecando em left negativo: o resultado eram os rotulos cortados fora da
     * tela a esquerda, com so os valores visiveis. Era esse o sintoma relatado.
     *
     * A saida nao e ajustar a largura, e abandonar a centralizacao: no celular o
     * dialogo vira folha de tela cheia, ancorada em 0,0. Assim nao ha conta de
     * margem negativa para dar errado, e o dialogo nao pode comecar fora da
     * tela. O !important e obrigatorio porque left, top e width vem inline. */
    .ui-dialog {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100%;
        margin: 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    .ui-dialog .ui-dialog-content {
        min-width: 0 !important;
        width: auto !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    .ui-dialog form {
        width: auto !important;
        padding: 8px;
        box-sizing: border-box;
    }
    .ui-dialog .ui-dialog-content-wrapper {
        padding: 0 6px 8px;
    }
    /* O titulo tinha float:left com margem de 20px, e os botoes do canto sao
     * absolutos: em tela estreita o titulo passava POR BAIXO do X e do icone de
     * informacao, como em "aimweb.RequestHistory : 146". Reservar o espaco dos
     * botoes no padding resolve sem mexer na posicao deles. */
    .ui-dialog .ui-dialog-titlebar {
        padding-right: 86px;
        min-height: 44px;
    }
    .ui-dialog .ui-dialog-title {
        float: none;
        display: block;
        margin: 6px 0;
        font-size: 17px;
        line-height: 1.25;
        white-space: normal;
        word-break: break-word;
    }
    /* O X de fechar tinha 16px num canto: alvo pequeno demais para o dedo, e e
     * a acao que se usa mais depois de liberar a licenca. */
    .ui-dialog .ui-dialog-titlebar-close {
        top: 10px;
        right: 8px;
        width: 34px;
        height: 34px;
        margin: 0;
    }
    /* No dialogo de mostrar estacao, rotulo e valor sao inline-block: em tela
     * estreita o valor cai para baixo do rotulo pela metade. Empilhar de vez. */
    .ui-dialog .show .name, .ui-dialog .show .value {
        display: block;
    }
    /* Botao de 75px fixo nao acomoda "Create"/"Update" com fonte maior. */
    .ui-dialog .buttons .ui-button, .ui-dialog .buttons a.button {
        width: auto;
        min-width: 90px;
    }
    /* A cortina precisa acompanhar a rolagem, senao clarea so o primeiro trecho. */
    .ui-widget-overlay {
        position: fixed;
    }

    /* -------------------------------------------------------------- avisos
     * .bounce-box com 800px fixos e o balao de erro/alerta/info (feedfy em
     * application.js). O !important e necessario porque o BounceBox.js
     * centraliza escrevendo marginLeft inline (-outerWidth/2). */
    .jq-modal, .bounce-box {
        width: auto !important;
        max-width: 100%;
        left: 0 !important;
        right: 0;
        margin-left: 0 !important;
        box-sizing: border-box;
    }
    .center {
        width: auto !important;
        max-width: 100%;
    }

    /* ------------------------------------------------------------ formularios
     * Os formularios de criar/editar licenca sao tabelas de rotulo/valor
     * (tr.prop > td.name + td.value). Em duas colunas estreitas o rotulo
     * quebra em quatro linhas e o campo fica com 80px. Empilhado, cada campo
     * usa a largura toda. */
    .dialog table, .dialog tbody, .dialog tr, .dialog td {
        display: block;
        width: auto;
    }
    .dialog tr.prop {
        border-bottom: 1px solid #EEE;
        padding: 4px 0;
    }
    .dialog td.name {
        font-weight: bold;
        padding: 6px 4px 0 4px;
        white-space: normal;
    }
    .dialog td.value {
        padding: 2px 4px 8px 4px;
        white-space: normal;
    }

    /* 16px nao e escolha estetica: abaixo disso o Safari do iOS dá zoom
     * automatico ao focar o campo, e a pagina fica deslocada depois. */
    .dialog input[type=text], .dialog input[type=password], .dialog input[type=number],
    .dialog select, .dialog textarea, .login-box input {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        min-height: 40px;
        box-sizing: border-box;
    }
    /* Caixa de marcar precisa continuar pequena, senao ocupa a linha inteira. */
    .dialog input[type=checkbox], .dialog input[type=radio] {
        width: auto;
        min-height: 0;
    }

    .buttons, .dialog .buttons {
        overflow: hidden;
    }
    .buttons a.button, .buttons .button, a.button {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding: 0 14px;
        margin: 4px 4px 0 0;
        font-size: 16px;
    }

    /* --------------------------------------------------------------- tabelas
     * Tabela de dados em tela estreita: rolar na horizontal, nao comprimir. Com
     * table-layout:fixed e width:100% herdados, sete colunas em 375px viram
     * sete reticencias -- o texto existe e nao se le. Deixando a tabela crescer
     * com o conteudo dentro de um container que rola, cada coluna fica legivel.
     *
     * A alternativa seria virar cartao por linha, que e melhor mas exige mexer
     * nos templates de scaffolding e regerar as GSPs de 23 dominios. Fica para
     * quando este fluxo provar que vale. */
    .page-container, .list, .stat-widget {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page-container > table, .list > table, .stat-widget > table {
        table-layout: auto;
        width: auto;
        min-width: 100%;
    }

    /* O clone de cabecalho do iPodHeader.js: e um <table position:fixed> filho
     * direto de #main-wrapper, sem classe -- as tabelas de verdade ficam dentro
     * de .page-container ou .list, entao este seletor pega so o clone. */
    #main-wrapper > table {
        display: none !important;
    }

    /* Largura de coluna em px vinha do desktop e atrapalha quando a tabela
     * pode crescer. */
    th.date, th.time, th.integer, th.id {
        width: auto;
    }

    /* --------------------------------------------------------------- diversos */
    .components-widget {
        height: auto;
        min-height: 90px;
    }
    .footer-logo {
        display: none;
    }
    /* Nada deve empurrar a pagina para os lados: o sintoma classico e a pagina
     * inteira deslizar e o cabecalho descolar do conteudo. */
    body, .outer-wrapper {
        max-width: 100%;
        overflow-x: hidden;
    }
}