/* admin_mobile.css — Admin #9 (22/07/2026): responsividade pro celular.
   Arquivo separado de proposito — nao mexe no CSS inline do vaz-bling.html.
   Só ativa em telas <= 820px; desktop fica intocado. */

/* 12/08/2026 - cobertura ampliada. O limite era 820px; um S23 Ultra DEITADO
   tem 824px e ficava de fora por 4 pixels. Em pe (384px) sempre pegou.
   Agora: ate 900px em qualquer tela, OU ate 1200px em aparelho de toque
   (celular deitado, tablet). Notebook com mouse nao entra. */
@media (max-width: 900px), (max-width: 1200px) and (pointer: coarse) {

  /* ═══════════════════════════════════════════════════════════════════
     MENU DE ABAS — 13/08/2026. O Alexandre reportou: "nao aparecem as
     abas no celular, nao consigo navegar". Estava certo, e era grave.

     CAUSA (medida, nao chutada): a .topbar e flex e tem ALTURA FIXA de
     52px. Todos os itens brigam pela largura numa linha so. A .nav-tabs
     e a unica que pode encolher, entao o navegador espremeu ela ate
     ZERO de largura:
         largura visivel .... 0 px
         largura necessaria . 913 px
     Com largura zero nao ha barra de rolagem: as abas existem no codigo
     mas ficam inalcancaveis. Das 8, so 2 apareciam por acidente.

     CORRECAO, em 3 partes — as 3 sao necessarias:
       1. height: auto      — sem isso o que quebra de linha VAZA por cima
                              do conteudo (testei: 6 elementos vazavam)
       2. flex-wrap: wrap   — deixa as abas cairem pra linha de baixo
       3. flex: 1 0 100%    — a barra de abas ocupa a linha inteira
     Conferido no simulador de 384px: 8 de 8 abas alcancaveis, rolagem
     lateral funcionando, 0 elementos vazando, barra de 149px (era 197).
     ═══════════════════════════════════════════════════════════════════ */
  .topbar {
    height: auto !important;
    min-height: 44px !important;
    flex-wrap: wrap !important;
    row-gap: 3px !important;
    column-gap: 5px !important;
    padding: 5px 7px !important;
    align-items: center !important;
  }
  .nav-tabs {
    flex: 1 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    order: 10 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-tab {
    display: inline-block !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  /* Enxuga a barra pra sobrar tela. Nada aqui e funcional: sao rotulos
     e separadores. Os botoes de acao continuam todos la. */
  .topbar .logo-divider,
  .topbar .topbar-sep,
  .topbar .bling-status,
  .topbar .autosync-badge { display: none !important; }
  .topbar button, .topbar a {
    font-size: 11px !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
  }
  .topbar svg { width: 12px !important; height: 12px !important; }

  /* Todas as tabelas roláveis horizontalmente */
  .tab-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 12px !important;
  }
  .tab-content th, .tab-content td {
    padding: 6px 8px !important;
    white-space: nowrap;
  }

  /* Cards de KPI empilham */
  .lkpi, .cs-card, .lcard {
    min-width: unset !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .lkpi-val, .cs-val { font-size: 18px !important; }

  /* Grids/flex viram coluna */
  .tab-content > div[style*="display:flex"],
  .tab-content > div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* Inputs e botões ocupam largura util */
  .tab-content input[type="text"],
  .tab-content input[type="search"],
  .tab-content input[type="number"],
  .tab-content select {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  button, .lbtn { min-height: 40px; }  /* alvo de toque confortavel */

  /* Overlays/modais respeitam a tela */
  .overlay > div, [id$="-overlay"] > div {
    max-width: 96vw !important;
    max-height: 88vh !important;
  }


  /* ═══════════════════════════════════════════════════════════════════
     CONSULTA DE PRECOS no celular  (12/08/2026)
     A tela mais usada fora da empresa. O problema nao era layout quebrado
     - as 3 colunas de preco ja empilhavam. Era TAMANHO: o preco, que e a
     informacao que se vai buscar, estava em 13px, do mesmo tamanho de
     todo o resto da tela.
     Tudo aqui vale so ate 820px. O desktop nao muda em nada.
     ═══════════════════════════════════════════════════════════════════ */

  /* O campo de busca em 16px NAO E ESTETICA: abaixo disso o iPhone da zoom
     sozinho ao tocar no campo, e a tela "pula". E a causa mais comum de
     sistema que parece ruim no celular. */
  .search-input {
    font-size: 16px !important;
    padding: 12px 14px 12px 38px !important;
  }

  /* O PRECO ganha destaque - e o que voce abriu o sistema pra ver */
  .price-val           { font-size: 20px !important; line-height: 1.3 !important; }
  .price-val.highlight { font-size: 23px !important; font-weight: 700 !important; }
  .price-row           { padding: 5px 0 !important; }
  .price-row + .price-row { border-top: 1px solid var(--border); }

  /* Rotulo do tipo (REVENDA / DISTRIBUIDOR / NACIONAL) */
  .price-type { font-size: 13px !important; margin-bottom: 12px !important; }
  .price-col  { padding: 16px !important; }

  /* Identificacao do produto */
  .product-name { font-size: 17px !important; line-height: 1.35 !important; }
  .code-badge   { font-size: 14px !important; padding: 6px 12px !important; }
  .stock-badge  { font-size: 14px !important; padding: 5px 10px !important; }

  /* Botao Copiar: tinha 10px de fonte e ~22px de altura - metade do minimo
     pro dedo. Vira botao de largura cheia com 44px. */
  .btn-copiar-preco {
    font-size: 14px !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 12px !important;
  }

  /* Acoes do card (Copiar Preco / Orcamento / Criar Pedido / Ver no Bling)
     empilham e ficam clicaveis */
  .card-actions { flex-wrap: wrap !important; gap: 10px !important; }
  .card-actions button,
  .card-actions a {
    min-height: 44px !important;
    font-size: 14px !important;
    flex: 1 1 46% !important;
    justify-content: center !important;
  }

  /* Cabecalho do card com respiro */
  .card-header { padding: 14px !important; gap: 12px !important; }

  /* A miniatura tem 200px no desktop - no celular comia metade da tela */
  .card-thumb { width: 84px !important; height: 84px !important; }

  /* DDD, CNPJ e o botao Consultar tambem sao usados na rua */
  #cnpjInput, #dddInput, .cnpj-input {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* Botao flutuante de orcamentos nao cobre conteudo no rodape */
  #vx-orc-btn { bottom: 12px !important; right: 12px !important; width: 46px !important; height: 46px !important; }


  /* ═══════════════════════════════════════════════════════════════════
     TABELAS VIRAM CARTOES NO CELULAR (13/08/2026)

     Tabela de 6 a 9 colunas em 380px so funciona rolando pro lado. Medi:
         Contas a Receber ... precisa 654px, cabe 311px
         Tabela de Vendas ... precisa 1609px
         Pedidos em Aberto .. precisa 1125px
     Rolar FUNCIONA (conferi - eu tinha dito ao Alexandre que nao dava, e
     estava errado). O problema e outro: pra ver o VALOR voce rola pra
     direita e perde de vista de QUEM e aquele valor.

     Testei congelar a 1a coluna: ficou pior. Em 380px a coluna congelada
     cobre o proprio numero que voce quer ler.

     Solucao: cada linha vira um cartao, rotulo na esquerda e valor na
     direita. Sem rolagem lateral nenhuma. O rotulo vem do CSS (nth-child)
     porque o cabecalho fica escondido - assim nao precisei mexer em JS.
     Desktop nao muda: tudo isto esta dentro da regra de tela pequena.
     ═══════════════════════════════════════════════════════════════════ */
  #crTable, #tvTable, .ped-table { display: block !important; overflow-x: visible !important; }
  #crTable thead, #tvTable thead, .ped-table thead { display: none !important; }
  #crTable tbody, #tvTable tbody, .ped-table tbody,
  #crTable tr, #tvTable tr, .ped-table tr { display: block !important; width: 100% !important; }
  #crTable tr, #tvTable tr, .ped-table tr {
    border: 1px solid var(--border, #232a35) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    background: var(--surface, #151a22) !important;
  }
  #crTable td, #tvTable td, .ped-table td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 5px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: right !important;
    font-size: 14px !important;
  }
  #crTable td::before, #tvTable td::before, .ped-table td::before {
    color: var(--muted, #8b95a5);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 400;
    flex: 0 0 auto;
    text-align: left;
  }

  /* Contas a Receber */
  #crTable td:nth-child(1)::before { content: 'Vencimento'; }
  #crTable td:nth-child(2)::before { content: 'Cliente'; }
  #crTable td:nth-child(3)::before { content: 'Historico'; }
  #crTable td:nth-child(4)::before { content: 'Valor'; }
  #crTable td:nth-child(5)::before { content: 'Status'; }
  #crTable td:nth-child(6)::before { content: 'Atraso'; }
  #crTable td:nth-child(2) { font-weight: 600 !important; }
  #crTable td:nth-child(4) { font-size: 19px !important; font-weight: 700 !important; }

  /* Tabela de Vendas */
  #tvTable td:nth-child(1)::before { content: 'Codigo'; }
  #tvTable td:nth-child(2)::before { content: 'Descricao'; }
  #tvTable td:nth-child(3)::before { content: 'N. original'; }
  #tvTable td:nth-child(4)::before { content: 'Custo'; }
  #tvTable td:nth-child(5)::before { content: 'Var. custo'; }
  #tvTable td:nth-child(6)::before { content: 'Nacional'; }
  #tvTable td:nth-child(7)::before { content: 'Preco venda'; }
  #tvTable td:nth-child(8)::before { content: 'Margem'; }
  #tvTable td:nth-child(2) { font-weight: 600 !important; }
  #tvTable td:nth-child(7) { font-size: 18px !important; font-weight: 700 !important; }
  /* As linhas de agrupamento por montadora nao viram cartao - viram titulo */
  #tvTable tr.tv-montadora-header {
    border: 0 !important; background: transparent !important;
    padding: 14px 0 2px !important; margin: 0 !important;
  }
  #tvTable tr.tv-montadora-header td {
    justify-content: flex-start !important; text-align: left !important;
    font-weight: 700 !important; font-size: 15px !important;
  }
  #tvTable tr.tv-montadora-header td::before { content: none !important; }

  /* Pedidos em Aberto */
  .ped-table td:nth-child(1)::before { content: 'SKU'; }
  .ped-table td:nth-child(2)::before { content: 'Produto'; }
  .ped-table td:nth-child(3)::before { content: 'Pedido'; }
  .ped-table td:nth-child(4)::before { content: 'Estoque'; }
  .ped-table td:nth-child(5)::before { content: 'Comprado'; }
  .ped-table td:nth-child(6)::before { content: 'Falta'; }
  .ped-table td:nth-child(7)::before { content: 'Status'; }
  .ped-table td:nth-child(8)::before { content: 'Clientes'; }
  .ped-table td:nth-child(9)::before { content: 'Marcar'; }
  .ped-table td:nth-child(2) { font-weight: 600 !important; }
  .ped-table td:nth-child(6) { font-size: 18px !important; font-weight: 700 !important; }
  .ped-table td:nth-child(9) { flex-wrap: wrap !important; }
  .ped-table td input { min-height: 40px !important; font-size: 16px !important; max-width: 90px !important; }
  .ped-table td button { min-height: 40px !important; }

  /* ═══════════════════════════════════════════════════════════════════
     DASHBOARD no celular (13/08/2026) — print do Alexandre mostrou os
     cartoes em colunas de 55px, com o texto quebrando letra por letra.

     CAUSA: o container dos 10 cartoes executivos tem o grid escrito
     DENTRO do HTML (style inline):
         grid-template-columns: repeat(5,1fr); grid-template-rows:1fr 1fr
     No computador sao 5 colunas confortaveis. Em 380px viram 5 colunas de
     55px. Como o estilo esta no proprio elemento, so um !important vence.

     Medido antes:  cartao 55px de largura x 1209px de altura
     Medido depois: cartao 313px x 130-398px, zero elementos espremidos
     ═══════════════════════════════════════════════════════════════════ */
  .tab-content div[style*="repeat(5,1fr)"],
  .tab-content div[style*="repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    height: auto !important;
  }
  .exec-card { height: auto !important; min-height: 0 !important; }
  /* listas longas dentro do cartao rolam sozinhas em vez de esticar a pagina */
  .exec-card-body { max-height: 320px !important; overflow-y: auto !important; }
  body { font-size: 14px; }
}

/* Telefones bem pequenos */
@media (max-width: 420px) {
  .nav-tab { font-size: 12px !important; padding: 7px 8px !important; }
  .tab-content { padding: 6px !important; }
}