/* ==========================================================================
   DFPet — mobile cards (direção 1a)
   Primeira passada: só CSS. Nenhum template, rota ou lógica muda.
   Acima de 900px NADA aqui é aplicado — o desktop continua exatamente igual.
   Como instalar e como voltar atrás: ver entrega/README-mobile.md
   ========================================================================== */

/* Esses elementos só devem existir visualmente abaixo de 900px. <nav>,
   <button> e <div> têm display block/inline-block por padrão do próprio
   navegador — sem esconder aqui fora do media query, eles vazavam pro
   desktop (apareciam soltos, sem os estilos de posição fixa/sheet que só
   existem lá dentro). O @media abaixo reabre cada um com o display certo. */
.navbar-mobile, .barra-carrinho-mobile, .btn-mais-acoes, .acoes-sheet-backdrop {
  display: none;
}

@media (max-width: 900px) {

  /* --- 1. a barra lateral sai da tela; a navegação vira barra inferior ---- */

  .sidebar { display: none !important; }
  .sidebar-toggle, .sidebar-backdrop { display: none !important; }
  .app-shell.has-sidebar { display: block; }
  .main-area { margin-left: 0 !important; width: 100% !important; }

  /* espaço pra barra inferior + safe area do iPhone */
  .main-area { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  .navbar-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: flex; align-items: stretch;
    background: var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .navbar-mobile a {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    padding: 9px 2px 11px; text-decoration: none;
    color: var(--ink-soft); font-size: 0.69rem; font-weight: 600;
  }
  .navbar-mobile a.active { color: var(--gold); font-weight: 700; }
  .navbar-mobile-mais {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    padding: 9px 2px 11px; background: none; border: none; box-shadow: none;
    color: var(--ink-soft); font-family: inherit; font-size: 0.69rem; font-weight: 600;
  }
  .navbar-mobile-mais:hover { background: none; }
  .navbar-mobile .icon { width: 22px; height: 22px; display: block; }
  .navbar-mobile .icon svg { width: 100%; height: 100%; display: block; }
  .navbar-mobile .nav-badge {
    position: absolute; transform: translate(14px, -6px);
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    background: var(--gold); color: var(--ink);
    font-family: var(--font-mono, monospace); font-size: 0.6rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }

  /* o status de sincronização vira uma linha no topo, legível */
  .sync-status-mobile {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--ink); color: var(--ink-soft);
    padding: 8px 16px; font-size: 0.72rem;
    font-family: var(--font-mono, monospace);
  }
  .sync-status-mobile button,
  .sync-status-mobile .btn-link {
    background: none; border: none; box-shadow: none; padding: 0;
    color: var(--gold); font-family: inherit; font-size: inherit; font-weight: 600;
  }

  /* --- 2. contraste: nome do cliente nunca em dourado sobre creme --------- */

  .tabela-carrinho a, .tabela-pedidos a, .tabela-atencao a,
  .tabela-objetivos a, .cartao-lista a {
    color: var(--ink); font-weight: 700; text-decoration: none;
  }
  .texto-alerta { color: #8A2F1E; }

  /* --- 3. piso de tipografia --------------------------------------------- */

  body { font-size: 1rem; }
  .container { padding-left: 16px; padding-right: 16px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.3rem; }
  .status-chip, .filtros-contador, .hint { font-size: 0.8rem; }

  /* --- 4. tabelas viram cards (o coração da mudança) --------------------- */

  .tabela-scroll { overflow: visible !important; max-height: none !important; padding-top: 0 !important; }
  .tabela-scroll::before { display: none !important; }   /* "arraste pro lado" */

  .tabela-carrinho, .tabela-pedidos, .tabela-atencao,
  .tabela-carrinho tbody, .tabela-pedidos tbody, .tabela-atencao tbody,
  .tabela-carrinho tr, .tabela-pedidos tr, .tabela-atencao tr,
  .tabela-carrinho td, .tabela-pedidos td, .tabela-atencao td {
    display: block; width: auto;
  }
  .tabela-carrinho thead, .tabela-pedidos thead, .tabela-atencao thead { display: none; }

  .tabela-carrinho tr, .tabela-pedidos tr, .tabela-atencao tr {
    position: relative;
    background: var(--surface, #FFFDF8);
    border: 1.5px solid rgba(10, 17, 48, 0.14);
    border-radius: var(--radius-md, 14px);
    padding: 14px;
    margin-bottom: 10px;
  }
  .tabela-carrinho td, .tabela-pedidos td, .tabela-atencao td {
    border: none; padding: 0; line-height: 1.35;
  }
  .tabela-carrinho td:empty, .tabela-pedidos td:empty, .tabela-atencao td:empty { display: none; }

  /* checkbox de seleção vai pro canto do card */
  .tabela-carrinho td:has(> input[type="checkbox"]),
  .tabela-pedidos td:has(> input[type="checkbox"]),
  .tabela-atencao td:has(> input[type="checkbox"]) {
    position: absolute; top: 12px; right: 12px; margin: 0;
  }

  /* 4a. clientes: fantasia é título; razão/cidade viram subtítulo ---------- */

  .tabela-carrinho td[data-col="fantasia"] {
    font-size: 1.06rem; font-weight: 700; color: var(--ink); padding-right: 34px;
  }
  .tabela-carrinho td[data-col="razao"],
  .tabela-carrinho td[data-col="cidade"] {
    display: inline; font-size: 0.82rem; color: var(--text-muted);
  }
  .tabela-carrinho td[data-col="razao"]::after { content: " · "; }
  .tabela-carrinho td[data-col="cidade"]::after { content: ""; }

  /* o que não decide a visita sai da lista e fica no detalhe do cliente */
  .tabela-carrinho td[data-col="cnpj"],
  .tabela-carrinho td[data-col="endereco"],
  .tabela-carrinho td[data-col="contato"],
  .tabela-carrinho td[data-col="ultima_compra"] { display: none; }

  .tabela-carrinho td[data-col="dias_sem_comprar"] {
    margin-top: 10px; display: inline-block;
    font-family: var(--font-mono, monospace); font-size: 0.76rem; font-weight: 500;
    background: #F2ECDD; color: var(--text-muted);
    padding: 4px 9px; border-radius: 6px;
  }
  .tabela-carrinho td[data-col="acesso"] {
    margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  }
  .tabela-carrinho td[data-col="acesso"] .btn-convite { margin-top: 0; min-height: 40px; }

  /* ações: primário de largura cheia, 48px; a rota deixa de ser um select
     gigante colado no botão principal */
  .tabela-carrinho td.celula-acoes,
  .tabela-pedidos td.celula-acoes,
  .tabela-atencao td.celula-acoes {
    margin-top: 12px; display: flex; gap: 8px; align-items: stretch;
  }
  .tabela-carrinho td.celula-acoes form:first-child { flex: 1; display: flex; }
  .tabela-carrinho td.celula-acoes form:first-child button {
    flex: 1; min-height: 48px; font-size: 1rem; border-radius: var(--radius-sm, 10px);
  }
  .tabela-carrinho td.celula-acoes .select-rota {
    min-height: 48px; width: 96px; border-radius: var(--radius-sm, 10px);
    -webkit-appearance: none; appearance: none;
    background: var(--surface, #FFFDF8); color: var(--ink);
    border: 1.5px solid rgba(10, 17, 48, 0.22);
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    text-align: center; padding: 0 8px;
  }

  /* 4b. pedidos ----------------------------------------------------------- */

  .tabela-pedidos td[data-col="cliente"] {
    font-size: 1rem; font-weight: 700; padding-right: 34px;
  }
  .tabela-pedidos td:first-child { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--text-muted); }
  .tabela-pedidos td:first-child a { color: var(--text-muted); font-weight: 500; }
  .tabela-pedidos td[data-col="data"],
  .tabela-pedidos td[data-col="situacao"] { display: inline; font-size: 0.82rem; color: var(--text-muted); }
  .tabela-pedidos td[data-col="data"]::after { content: " · "; }
  .tabela-pedidos td.col-dot-situacao { position: absolute; top: 16px; right: 14px; }
  .tabela-pedidos td[data-col="valor"] {
    margin-top: 8px; font-family: var(--font-mono, monospace);
    font-size: 1.05rem; font-weight: 500;
  }

  /* 4c. atenção — ordem das colunas: atraso, cliente, cidade, venc, valor, ação */

  .tabela-atencao tr { border-left: 5px solid var(--gold); }
  .tabela-atencao tr.atraso-grave { border-left-color: #8A2F1E; }
  .tabela-atencao tr.atraso-medio { border-left-color: #B4562F; }
  .tabela-atencao tr.atraso-hoje  { border-left-color: var(--gold); }
  /* o fundo colorido na linha inteira sai: piorava a leitura do nome */
  .tabela-atencao tr.atraso-grave, .tabela-atencao tr.atraso-medio,
  .tabela-atencao tr.atraso-hoje { background: var(--surface, #FFFDF8); }

  .tabela-atencao td:nth-child(1) {   /* atraso */
    order: 3; margin-top: 10px; display: inline-block;
    font-family: var(--font-mono, monospace); font-size: 0.76rem; font-weight: 500;
    background: #F7E4E0; color: #8A2F1E; padding: 4px 9px; border-radius: 6px;
  }
  .tabela-atencao td:nth-child(2) { font-size: 1rem; font-weight: 700; padding-right: 34px; }
  .tabela-atencao td:nth-child(3),
  .tabela-atencao td:nth-child(4) { display: inline; font-size: 0.82rem; color: var(--text-muted); }
  .tabela-atencao td:nth-child(3)::after { content: " · vence "; }
  .tabela-atencao td:nth-child(5) {
    margin-top: 6px; font-family: var(--font-mono, monospace);
    font-size: 1.1rem; font-weight: 500;
  }
  .tabela-atencao td:nth-child(6) { margin-top: 12px; }
  .tabela-atencao td:nth-child(6) .btn-outline {
    width: 100%; min-height: 48px; font-size: 0.95rem;
    background: var(--gold); color: var(--ink); border-color: var(--gold);
  }

  /* --- 5. filtros e busca ------------------------------------------------- */

  .catalogo-filtros { gap: 10px; }
  .catalogo-filtros input[type="search"],
  .catalogo-filtros input[type="text"] { min-height: 48px; font-size: 1rem; }
  /* o botão "Buscar" de largura cheia era o elemento mais forte da tela */
  .catalogo-filtros > button[type="submit"] { display: none; }
  .busca-wrap .btn-icone-busca, .busca-wrap .btn-microfone { min-width: 44px; min-height: 44px; }

  .filtros-toolbar {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .filtros-toolbar::-webkit-scrollbar { height: 0; }
  .filtros-toolbar > * { flex: 0 0 auto; }
  .chip, .btn-outline { min-height: 40px; display: inline-flex; align-items: center; }

  /* busca por nome fica sozinha na linha; categoria + chips viram uma
     fileira de botões roláveis embaixo, tipo os chips de filtro */
  .catalogo-filtros > .busca-wrap:first-child { flex: 1 1 100%; }

  .catalogo-filtros-chips {
    display: flex; flex-wrap: nowrap; gap: 8px;
    flex: 1 1 100%;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .catalogo-filtros-chips::-webkit-scrollbar { height: 0; }
  .catalogo-filtros-chips > * { flex: 0 0 auto; }

  /* categoria vira um botão igual aos outros, não uma caixa de busca */
  .catalogo-filtros-chips .busca-wrap:has(#busca-categoria) {
    flex: 0 0 auto !important; min-width: 0 !important; width: auto !important;
  }
  .catalogo-filtros-chips .busca-wrap:has(#busca-categoria) input[type="text"] {
    min-height: 40px; height: 40px; width: 118px;
    padding: 0 14px; border-radius: 999px; font-size: 0.85rem;
  }
  .catalogo-filtros-chips .busca-wrap:has(#busca-categoria) .btn-microfone { display: none; }

  /* --- 6. catálogo: a linha por categoria continua rolando pro lado,
           mas o card para inteiro e não fica cortado ao meio -------------- */

  .linha-scroll {
    scroll-snap-type: x mandatory;
    padding-left: 16px; padding-right: 16px;
    scroll-padding-left: 16px;
    margin-left: -16px; margin-right: -16px;
  }
  .linha-scroll > .produto-card { flex: 0 0 168px; scroll-snap-align: start; }
  .seta-scroll { display: none; }             /* o snap já entrega a affordance */
  .categoria-cabecalho { padding-right: 4px; }

  .produto-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .produto-card .produto-nome { font-size: 0.88rem; min-height: 2.6em; }
  .produto-card .produto-preco .preco-atual { font-size: 1.05rem; }
  .produto-card .qtd-stepper { min-height: 44px; }
  .produto-card .qtd-menos, .produto-card .qtd-mais { min-width: 44px; min-height: 44px; }
  .produto-card .produto-form > button[type="submit"] { min-height: 44px; font-size: 0.95rem; }

  /* --- 7. nada flutuando sobre o conteúdo -------------------------------- */

  .cart-fab { display: none; }                 /* substituído pela barra de total */
  .chat-widget { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .chat-fab { width: 44px; height: 44px; }
  .chat-panel { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }

  .barra-carrinho-mobile {
    position: fixed; left: 0; right: 0;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    z-index: 110;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--gold); color: var(--ink);
    padding: 11px 16px;
  }
  .barra-carrinho-mobile[hidden] { display: none; }
  .barra-carrinho-mobile .rotulo { font-size: 0.72rem; font-weight: 700; color: #6B4E12; }
  .barra-carrinho-mobile .total { font-family: var(--font-mono, monospace); font-size: 1.12rem; font-weight: 500; }
  .barra-carrinho-mobile a {
    min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm, 10px);
    background: var(--ink); color: var(--gold);
    display: flex; align-items: center;
    font-size: 0.95rem; font-weight: 700; text-decoration: none;
  }

  /* --- 8. barra de totais das listas fica acima da navegação ------------- */

  .barra-acoes-clientes {
    position: sticky; bottom: 0; z-index: 90;
    background: var(--surface, #FFFDF8);
    border-top: 1.5px solid rgba(10, 17, 48, 0.12);
    margin: 0 -16px; padding: 12px 16px;
  }

  /* --- 9. vazio com saída ------------------------------------------------ */

  .empty-state { padding: 26px 18px; text-align: center; font-size: 0.95rem; }
  .empty-state .btn-primario { margin-top: 14px; min-height: 48px; }
}