/*
 * mobile.css
 * ----------
 * Ajustes de responsividade para telas pequenas (celular).
 *
 * Carregado por último em TagBuilder::importHeadEssentials(), depois do
 * AdminLTE e das skins, para poder sobrescrevê-los sem !important.
 *
 * Tudo aqui vive dentro de media queries: no desktop nada muda.
 */

/* Evita o iOS inflar a fonte ao girar o aparelho para paisagem. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 767px) {

    /*
     * Header
     *
     * O AdminLTE deixa .sidebar-toggle e .navbar-custom-menu flutuando dentro
     * da .navbar, que tem min-height fixo de 50px e não limpa os floats. Quando
     * a soma dos dois passa da largura da tela (basta o badge "MODO TESTE" do
     * ambiente de teste, ou um nome de usuário longo), o menu do usuário cai
     * para uma linha que fica FORA do fundo escuro: sino, nome e "Sair" viram
     * texto branco sobre o conteúdo branco, sobrepondo a página.
     *
     * Virando a navbar em flex, os floats deixam de valer, o toggle passa a
     * encolher e o menu fica ancorado à direita dentro da barra.
     */
    .main-header .navbar {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    .main-header .navbar > .sidebar-toggle {
        float: none;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    /* Protege o ícone do hamburger de ser espremido junto com o badge. */
    .main-header .navbar > .sidebar-toggle::before {
        flex: 0 0 auto;
    }

    /* Badge "MODO TESTE" (só existe em dev/teste): encolhe com reticências
       em vez de empurrar o menu do usuário para fora da barra. */
    .main-header .navbar > .sidebar-toggle > div {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
    }

    .main-header .navbar-custom-menu {
        float: none;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .main-header .navbar-custom-menu > .nav {
        display: flex;
        align-items: center;
        float: none;
        margin: 0;
    }

    .main-header .navbar-custom-menu > .nav > li {
        float: none;
    }

    .main-header .navbar-custom-menu > .nav > li > a {
        display: block;
        padding: 15px 10px;
        font-size: 13px;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Conteúdo
     *
     * 15px de cada lado no .content mais 10px no .box-body comem 50px de uma
     * tela de 440px. Apertando as laterais sobra espaço para tabela e gráfico.
     */
    .content {
        padding: 10px 8px;
    }

    .box-body {
        padding-left: 10px;
        padding-right: 10px;
    }
}