/* ================================================================
   V35 - CELULAR: os defeitos medidos nas telas do cliente

   O dono avisou que "muitas coisas quebraram" no celular, e que o
   celular e por onde os clientes vao chegar. Medi cada tela num quadro
   de 375px (iPhone) e achei dois defeitos de verdade. Este arquivo
   conserta os dois. Carregado por ultimo no base.html, para vencer as
   regras antigas quando precisa vencer.
   ================================================================ */


/* ----------------------------------------------------------------
   DEFEITO 1 - as tabelas de ranking viram cartoes no celular

   Medido: a tabela de /intervalo-11 tem 720px e a de /frequencia tem
   790px, numa tela de 375px. Elas estao dentro de uma caixa com
   overflow-x:auto, entao o dado nao se perde - mas a pessoa ve menos
   da metade e precisa arrastar uma area DENTRO da pagina, com o dedo,
   sem saber que da. Para quem nao tem pratica isso e "quebrado".

   No celular cada linha passa a ser um cartao, empilhado, com o nome
   da coluna escrito ao lado do valor. Nada de rolagem lateral.
   O ::before de cada celula usa o data-rotulo do proprio HTML.
   ---------------------------------------------------------------- */
@media (max-width:760px){
  .ranking-table-wrap{overflow:visible; border:0; background:none; box-shadow:none}

  /* A folha antiga fixa "min-width:720px" (e 790px na de frequencia). O
     min-width vence o width:100%, entao sem zerar isso a tabela continuava
     larga mesmo virando cartao - foi o que a medicao mostrou. */
  .ranking-table,
  .ranking-table.frequency-ranking-table{
    width:100%; min-width:0; border-collapse:collapse; display:block;
  }
  .ranking-table thead{display:none}
  .ranking-table tbody{display:block}

  .ranking-table tbody tr{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    gap:6px 12px; align-items:baseline;
    margin-bottom:10px; padding:14px 15px;
    border:1px solid #e4dfec; border-radius:14px; background:#fff;
    box-shadow:0 2px 10px rgba(40,25,60,.05);
  }
  .ranking-table tbody tr.current-row{
    border-color:#c9a9e8; background:#faf6fe;
  }

  .ranking-table tbody td{
    display:contents; border:0; padding:0; text-align:left;
  }
  /* O rotulo da coluna, escrito, no lugar do cabecalho que sumiu. */
  .ranking-table tbody td::before{
    content:attr(data-rotulo);
    color:#7d7590; font-size:11.5px; font-weight:700;
    white-space:nowrap; padding-top:2px;
  }
  .ranking-table tbody td[data-rotulo=""]::before{content:none}

  /* A posicao vira o titulo do cartao, ocupando a linha toda. */
  .ranking-table tbody td:first-child{display:block; grid-column:1 / -1}
  .ranking-table tbody td:first-child::before{content:none}
  .ranking-table tbody td:first-child .rank-number{
    display:inline-block; padding:4px 11px; border-radius:999px;
    background:#f1eaf8; color:#6f2aa8; font-size:13px; font-weight:800;
  }

  .ranking-table tbody td strong{display:block; font-size:14px}
  .ranking-table tbody td small{display:block; color:#7d7590; font-size:11.5px}
  .ranking-table tbody td .delay-pill{font-size:12.5px}

  /* O botao "Ver" vira largura cheia: no celular alvo pequeno nao pega. */
  .ranking-table tbody td:last-child{display:block; grid-column:1 / -1; margin-top:4px}
  .ranking-table tbody td:last-child::before{content:none}
  .ranking-table tbody td .table-action{
    display:flex; align-items:center; justify-content:center;
    min-height:42px; border-radius:10px;
    background:#f4eefb; color:#6f2aa8;
    font-size:13.5px; font-weight:800; text-decoration:none;
  }
}


/* ----------------------------------------------------------------
   DEFEITO 2 - o menu de trocar loteria saia da tela

   Medido: o conteudo de .game-menu-popover terminava 104px depois da
   borda direita da tela de 375px. Aberto no celular, metade das
   loterias ficava fora e nao tinha como alcançar.

   No celular ele passa a ocupar a largura da tela, com rolagem
   vertical propria e altura limitada.
   ---------------------------------------------------------------- */
@media (max-width:760px){
  .game-menu{position:static}
  .game-menu-popover{
    position:fixed; left:8px; right:8px; top:auto;
    width:auto; min-width:0; max-width:none;
    max-height:min(62vh, 460px); overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .game-menu-popover a{min-height:52px}
  .game-menu-popover .menu-game-mark,
  .game-menu-popover .menu-symbol{flex-shrink:0}
}


/* ----------------------------------------------------------------
   Cuidados gerais de celular, aplicados nas telas do cliente
   ---------------------------------------------------------------- */
@media (max-width:760px){
  /* Palavra comprida (endereco de e-mail, chave de licenca) nao pode
     esticar a caixa e empurrar o resto para fora da tela. */
  .account-item b, .license-card strong, .mini-numbers{
    overflow-wrap:anywhere; word-break:break-word;
  }
  /* Alvo de toque: 44px e o minimo para o dedo acertar sem erro. */
  .link-button, .table-action{min-height:44px; display:inline-flex; align-items:center}
}

/* O iPhone amplia a tela sozinho em qualquer campo com fonte menor que
   16px, e ai a pagina aparece cortada nas laterais. Regra repetida aqui
   porque esta folha carrega depois e sobrescreveria. */
@media (max-width:900px){
  input, select, textarea{font-size:16px}
}