/*
 * Padrão visual do sistema: letra grande e tela cheia.
 *
 * Nasceu nas telas de compras e passou a valer para o sistema todo. Fica em
 * arquivo próprio, fora do `app.css`, porque aquele é gerado pelo build do
 * Laravel Mix a partir do `resources/sass/app.scss` e seria sobrescrito na
 * próxima compilação. Este aqui é editado à mão e carregado depois, então
 * vence o Bootstrap sem precisar de `!important`.
 *
 * Tudo está preso a `body.layout-app` / `body.layout-default`, as duas classes
 * de layout do sistema. As telas de impressão (recibos, receitas, rótulos,
 * PDFs) não passam por layout nenhum e por isso continuam exatamente como
 * estão — o tamanho delas é acertado pelo papel, não pela tela.
 *
 * As medidas partem do padrão do Bootstrap 3, que é 14px: o corpo vai a 18px
 * e nada fica abaixo de 15px, inclusive o que o Bootstrap encolhe sozinho
 * (`small`, `.btn-xs`, `.label`).
 */

/* ------------------------------------------------------------------ *
 * Largura: a tela toda
 * ------------------------------------------------------------------ */

/* O `.container` do Bootstrap tem largura fixa (1170px no monitor grande), e
   com a letra maior as tabelas largas não cabiam mais nela — sobrava rolagem
   horizontal, ruim de ler. Aqui ele passa a ocupar a largura disponível, com
   folga nas bordas para o conteúdo não encostar no vidro. Vale também para o
   `.container-fluid`, que já é largo mas encosta na borda. */
body.layout-app .container,
body.layout-app .container-fluid,
body.layout-default .container,
body.layout-default .container-fluid {
  width: 100%;
  max-width: none;
  padding-left: 25px;
  padding-right: 25px;
}

/* Telas de formulário centralizado (login, cadastro, recuperação de senha).
   São uma coluna só, e esticada na largura toda o campo de e-mail viraria uma
   faixa de ponta a ponta. Continuam com a largura de antes. */
body.form-centrado .container {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------ *
 * Tipografia
 * ------------------------------------------------------------------ */

body.layout-app,
body.layout-default {
  font-size: 18px;
  line-height: 1.6;
}

body.layout-app h1,
body.layout-default h1 {
  font-size: 38px;
}

body.layout-app h2,
body.layout-default h2 {
  font-size: 33px;
}

body.layout-app h3,
body.layout-default h3 {
  font-size: 30px;
}

body.layout-app h4,
body.layout-default h4 {
  font-size: 22px;
}

body.layout-app h1 small,
body.layout-app h2 small,
body.layout-app h3 small,
body.layout-default h3 small {
  font-size: 20px;
}

/* O Bootstrap deixa `small` em 85%, o que aqui viraria letra miúda de novo. */
body.layout-app small,
body.layout-app .small,
body.layout-default small,
body.layout-default .small {
  font-size: 15px;
}

/* ------------------------------------------------------------------ *
 * Tabelas — é o que mais se lê no sistema
 * ------------------------------------------------------------------ */

body.layout-app .table,
body.layout-default .table {
  font-size: 18px;
}

body.layout-app .table > thead > tr > th,
body.layout-default .table > thead > tr > th {
  font-size: 18px;
  font-weight: bold;
}

body.layout-app .table > tbody > tr > td,
body.layout-default .table > tbody > tr > td {
  padding: 10px 8px;
  vertical-align: middle;
}

/* Rede de segurança para a tabela muito larga: com a tela toda disponível a
   rolagem lateral não deve aparecer, mas se aparecer (zoom alto do navegador,
   monitor pequeno) é melhor rolar do que espremer o texto. */
body.layout-app .tabela-rolavel,
body.layout-default .tabela-rolavel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Códigos e chaves aparecem em monoespaçada, que desenha mais largo que a
   fonte do texto: cresce menos para não empurrar a coluna. */
body.layout-app [style*="monospace"],
body.layout-default [style*="monospace"] {
  font-size: 14px;
}

/* Chave de acesso da NFe: 44 caracteres sem um espaço no meio. Sem poder
   quebrar, ela sozinha define a largura mínima da coluna e traz a rolagem
   horizontal de volta. */
body.layout-app td [style*="monospace"],
body.layout-default td [style*="monospace"] {
  word-break: break-all;
}

/* ------------------------------------------------------------------ *
 * Formulários e botões
 * ------------------------------------------------------------------ */

body.layout-app .form-control,
body.layout-default .form-control {
  font-size: 18px;
  height: auto;
  padding: 9px 12px;
}

body.layout-app label,
body.layout-default label {
  font-size: 18px;
}

body.layout-app .input-group-addon,
body.layout-default .input-group-addon {
  font-size: 18px;
}

body.layout-app .btn,
body.layout-default .btn {
  font-size: 17px;
}

body.layout-app .btn-sm,
body.layout-default .btn-sm {
  font-size: 17px;
  padding: 8px 14px;
}

body.layout-app .btn-xs,
body.layout-default .btn-xs {
  font-size: 15px;
  padding: 5px 10px;
}

body.layout-app .btn-lg,
body.layout-default .btn-lg {
  font-size: 22px;
}

/* ------------------------------------------------------------------ *
 * Avisos, etiquetas, painéis
 * ------------------------------------------------------------------ */

body.layout-app .alert,
body.layout-default .alert {
  font-size: 18px;
}

body.layout-app .label,
body.layout-default .label {
  font-size: 15px;
  padding: 4px 8px;
}

body.layout-app .badge,
body.layout-default .badge {
  font-size: 15px;
}

body.layout-app .panel-heading,
body.layout-default .panel-heading {
  font-size: 19px;
}

body.layout-app .panel-title,
body.layout-default .panel-title {
  font-size: 20px;
}

body.layout-app .modal-title,
body.layout-default .modal-title {
  font-size: 24px;
}

body.layout-app .list-group-item,
body.layout-default .list-group-item {
  font-size: 18px;
}

body.layout-app .nav-tabs > li > a,
body.layout-default .nav-tabs > li > a {
  font-size: 18px;
}

/* Cartões de resumo (os números grandes no topo das listagens): são lidos de
   longe, então crescem bem mais que o resto. */
body.layout-app .well strong,
body.layout-default .well strong {
  font-size: 32px;
}

body.layout-app .well small,
body.layout-default .well small {
  font-size: 16px;
}

body.layout-app .pagination > li > a,
body.layout-app .pagination > li > span,
body.layout-default .pagination > li > a,
body.layout-default .pagination > li > span {
  font-size: 18px;
  padding: 8px 16px;
}

/* Sugestões do autocomplete (fornecedor, cliente, produto). O plugin traz
   padding de 2px, apertado demais para a letra grande. */
body.layout-app .autocomplete-suggestion,
body.layout-default .autocomplete-suggestion {
  font-size: 17px;
  padding: 6px 10px;
}

/* ------------------------------------------------------------------ *
 * Menu
 * ------------------------------------------------------------------ */

/* O menu tem oito grupos além do nome do usuário. A 18px ele quebraria em
   duas linhas em monitor menor, então fica um ponto abaixo do corpo do texto
   e encolhe mais um pouco em tela estreita. */
body.layout-app .navbar-nav > li > a,
body.layout-app .navbar-brand {
  font-size: 17px;
}

body.layout-app .dropdown-menu > li > a {
  font-size: 17px;
  padding: 8px 20px;
}

@media (max-width: 1500px) {
  body.layout-app .navbar-nav > li > a {
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* O menu do layout antigo é fixo no topo; com a letra maior ele ficou mais
   alto e passou a cobrir o começo do conteúdo. */
body.layout-default {
  padding-top: 85px;
}

/* ------------------------------------------------------------------ *
 * Celular
 * ------------------------------------------------------------------ */

/*
 * O problema no celular é a tabela: numa tela de 400px, uma tabela de oito
 * colunas ou fica ilegível de tão espremida ou vira uma rolagem lateral em que
 * a pessoa perde de vista de qual linha está lendo.
 *
 * Aqui cada linha vira um cartão e cada célula vira "RÓTULO / valor", um
 * embaixo do outro. Nada rola de lado, e o nome da coluna anda junto com o
 * dado — que é justamente o que se perde quando a tabela rola.
 *
 * O rótulo vem do `<thead>`, copiado para cada célula pelo `tabelas-mobile.js`.
 * Tabela sem cabeçalho, ou com célula mesclada, não recebe rótulo e cai na
 * rolagem lateral — sem saber o nome da coluna, o cartão só atrapalharia.
 */
@media (max-width: 767px) {

  /* Menos folga lateral: no celular cada pixel de largura conta. */
  body.layout-app .container,
  body.layout-app .container-fluid,
  body.layout-default .container,
  body.layout-default .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.layout-app h1,
  body.layout-default h1 {
    font-size: 28px;
  }

  body.layout-app h2,
  body.layout-default h2 {
    font-size: 26px;
  }

  body.layout-app h3,
  body.layout-default h3 {
    font-size: 24px;
  }

  /* Cabeçalho de tela costuma trazer o botão de ação em `pull-right`; solto
     numa tela estreita ele monta em cima do título. */
  body.layout-app h3 .pull-right,
  body.layout-app h3 .btn {
    float: none !important;
    display: block;
    margin-top: 10px;
  }

  /* Fora do cartão: rola de lado, o melhor que dá para fazer sem saber o nome
     da coluna. Com `display:block` a própria tabela vira a área de rolagem, e
     por isso vale mesmo nas telas que não embrulharam a tabela em nada. */
  body.layout-app .table:not(.tabela-cartao),
  body.layout-default .table:not(.tabela-cartao) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.layout-app .tabela-cartao,
  body.layout-app .tabela-cartao > tbody,
  body.layout-app .tabela-cartao > tfoot,
  body.layout-default .tabela-cartao,
  body.layout-default .tabela-cartao > tbody,
  body.layout-default .tabela-cartao > tfoot {
    display: block;
    width: 100%;
  }

  /* O cabeçalho sai: o nome da coluna agora vai dentro de cada célula. */
  body.layout-app .tabela-cartao > thead,
  body.layout-default .tabela-cartao > thead {
    display: none;
  }

  body.layout-app .tabela-cartao > tbody > tr,
  body.layout-app .tabela-cartao > tfoot > tr,
  body.layout-default .tabela-cartao > tbody > tr,
  body.layout-default .tabela-cartao > tfoot > tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
  }

  body.layout-app .tabela-cartao > tbody > tr > td,
  body.layout-app .tabela-cartao > tfoot > tr > th,
  body.layout-default .tabela-cartao > tbody > tr > td,
  body.layout-default .tabela-cartao > tfoot > tr > th {
    display: block;
    width: auto !important;
    border: 0;
    border-bottom: 1px solid #f0f0f0;
    padding: 8px 12px;
    text-align: left !important;
  }

  body.layout-app .tabela-cartao > tbody > tr > td:last-child,
  body.layout-default .tabela-cartao > tbody > tr > td:last-child {
    border-bottom: 0;
  }

  /* O rótulo fica acima do valor, não ao lado: célula com nome de fornecedor,
     chave de acesso ou uma fileira de botões não caberia na metade da largura,
     e empurraria tudo de novo. */
  body.layout-app .tabela-cartao > tbody > tr > td[data-rotulo]:before,
  body.layout-default .tabela-cartao > tbody > tr > td[data-rotulo]:before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #888;
  }

  /* Célula sem conteúdo só somaria altura ao cartão. */
  body.layout-app .tabela-cartao td[data-vazio],
  body.layout-default .tabela-cartao td[data-vazio] {
    display: none;
  }

  /* Os botões de ação ganham espaço para o dedo. */
  body.layout-app .tabela-cartao .btn,
  body.layout-default .tabela-cartao .btn {
    margin: 2px 4px 2px 0;
    padding: 8px 14px;
    font-size: 16px;
  }

  /* No celular a chave de acesso pode usar a largura toda. */
  body.layout-app [style*="monospace"],
  body.layout-default [style*="monospace"] {
    font-size: 13px;
  }

  /* Filtro em linha vira filtro empilhado: lado a lado, cada campo fica com
     uns poucos centímetros. */
  body.layout-app .form-inline .form-group,
  body.layout-default .form-inline .form-group {
    display: block;
    margin-bottom: 8px;
  }

  body.layout-app .form-inline .form-control,
  body.layout-default .form-inline .form-control {
    display: block;
    width: 100% !important;
  }

  /* Largura fixa escrita direto na view arrebenta a tela estreita. */
  body.layout-app .form-control,
  body.layout-default .form-control {
    max-width: 100%;
  }

  body.layout-app .pagination > li > a,
  body.layout-app .pagination > li > span,
  body.layout-default .pagination > li > a,
  body.layout-default .pagination > li > span {
    padding: 8px 12px;
  }

  /* Cartão de resumo: quatro colunas viram quatro blocos, um sob o outro. */
  body.layout-app .well strong,
  body.layout-default .well strong {
    font-size: 26px;
  }

  body.layout-app .well,
  body.layout-default .well {
    margin-bottom: 10px;
  }

  /* No celular o menu vira uma lista sob o botão de três traços, e é por ele
     que se anda no sistema inteiro: volta ao tamanho cheio, com altura de
     toque folgada. A redução da regra de 1500px acima seria pequena demais
     para o dedo. */
  body.layout-app .navbar-nav > li > a {
    font-size: 18px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  body.layout-app .navbar-nav .dropdown-menu > li > a {
    font-size: 17px;
    padding: 10px 15px 10px 30px;
  }

  /* São oito grupos de menu: no limite de 340px do Bootstrap a lista fica
     rolando dentro de si mesma, dentro da página que já rola. */
  body.layout-app .navbar-collapse {
    max-height: 80vh;
  }

  /* A busca da DataTable e o "mostrando X de Y" ficam apertados em duas
     colunas nesta largura. */
  body.layout-app .dataTables_filter,
  body.layout-app .dataTables_length,
  body.layout-app .dataTables_info,
  body.layout-app .dataTables_paginate {
    float: none !important;
    width: 100%;
    text-align: left !important;
  }

  body.layout-app .dataTables_filter input {
    width: 100%;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------------ *
 * Impressão
 * ------------------------------------------------------------------ */

/* Na tela a folga ajuda; no papel ela só come margem, que a impressora já dá. */
@media print {
  body.layout-app .container,
  body.layout-app .container-fluid,
  body.layout-default .container,
  body.layout-default .container-fluid {
    padding-left: 0;
    padding-right: 0;
  }
}