/* =====================================================================
   Painel responsivo — celular, tablet e computador.
   Carregado por último em /admin/index.html. Tabelas viram cartões com
   rótulos (data-label preenchido por /assets/responsive.js).
   ===================================================================== */

/* ---------- Computador / tablet deitado ---------- */
/* Atalhos rápidos do PDV: colunas automáticas (6 fixas cortavam o último card) */
#quickProductsGrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important}
.quick-prod-card{min-width:0}
.quick-prod-card *{overflow-wrap:anywhere}

/* Botão "Filtros" só aparece no celular */
.m-filter-toggle{display:none}

/* ---------- Tablet em pé e celular: tabelas viram cartões ---------- */
@media (max-width:820px){
  .tbl-wrap:has(> .tbl-cards){overflow:visible;border-radius:0;background:transparent;box-shadow:none}
  .tbl.tbl-cards{display:block;width:100%;min-width:0 !important;background:transparent;border:0;box-shadow:none}
  .tbl.tbl-cards thead{display:none}
  .tbl.tbl-cards tbody,.tbl.tbl-cards tfoot{display:block;width:100%}
  .tbl.tbl-cards tr{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;width:100%;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin:0 0 10px;
    box-shadow:0 2px 8px rgba(0,0,0,.04)}
  .tbl.tbl-cards tr:hover td{background:transparent}
  .tbl.tbl-cards td{display:flex;align-items:center;justify-content:space-between;gap:12px;
    flex:1 1 100%;min-width:0;padding:5px 0 !important;border:0 !important;background:transparent !important;
    text-align:right !important;white-space:normal !important;width:auto !important;max-width:100% !important}
  .tbl.tbl-cards td + td{border-top:1px dashed var(--line) !important}
  .tbl.tbl-cards td::before{content:attr(data-label);flex:0 0 auto;max-width:42%;text-align:left;
    font-family:var(--fdisp);font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  .tbl.tbl-cards td[data-label=""]::before{display:none}
  .tbl.tbl-cards td[data-label=""]{justify-content:flex-start;text-align:left !important}
  .tbl.tbl-cards td > *{max-width:100%}
  /* primeira célula sem rótulo (checkbox / foto) fica pequena, ao lado do título */
  .tbl.tbl-cards td[data-label=""]:has(> input[type=checkbox]:only-child),
  .tbl.tbl-cards td[data-label=""]:has(> img:only-child),
  .tbl.tbl-cards td[data-label=""]:has(> .thumb:only-child){flex:0 0 auto;border-top:0 !important;padding:2px 0 !important}
  /* células de ações: botões ocupam a linha e quebram */
  .tbl.tbl-cards td.acts,.tbl.tbl-cards td:last-child:has(.btn){justify-content:flex-end;flex-wrap:wrap}
  .tbl.tbl-cards td.acts > div,.tbl.tbl-cards td:last-child > div:has(.btn){flex-wrap:wrap;justify-content:flex-end !important;gap:6px !important}
  .tbl.tbl-cards td.acts::before{display:none}
  /* linha de aviso ("Nenhum registro...") */
  .tbl.tbl-cards td.td-full{justify-content:center;text-align:center !important;padding:18px 0 !important}
  .tbl.tbl-cards td.td-full::before{display:none}
  .tbl.tbl-cards tfoot tr{background:var(--surface2);font-weight:700}

  /* título do cartão: foto + nome/cliente na mesma linha, em destaque */
  .tbl.tbl-cards td[data-label=""]:has(> input[type=checkbox]:only-child){order:-3}
  .tbl.tbl-cards td[data-label=""]:has(> img:only-child),.tbl.tbl-cards td[data-label=""]:has(> .thumb:only-child),.tbl.tbl-cards td[data-label="Foto" i]{order:-2;flex:0 0 auto;border-top:0 !important}
  .tbl.tbl-cards td[data-label="Foto" i]::before{display:none}
  .tbl.tbl-cards td:is([data-label="Produto" i],[data-label="Nome" i],[data-label^="Cliente" i],[data-label="# / Data" i],[data-label="Descrição" i]){
    order:-1;flex:1 1 0;min-width:55%;border-top:0 !important;justify-content:flex-start;text-align:left !important;font-size:14.5px}
  .tbl.tbl-cards td:is([data-label="Produto" i],[data-label="Nome" i],[data-label^="Cliente" i],[data-label="# / Data" i],[data-label="Descrição" i])::before{display:none}
  .tbl.tbl-cards tr > td:is([data-label="Produto" i],[data-label="Nome" i],[data-label^="Cliente" i],[data-label="# / Data" i]) + td{border-top:1px dashed var(--line) !important}
}

/* Tablet em pé: dois cartões por linha */
@media (min-width:641px) and (max-width:820px){
  .tbl.tbl-cards tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
  .tbl.tbl-cards tbody tr{margin:0}
  .tbl.tbl-cards tbody tr:has(> td.td-full){grid-column:1/-1}
}

/* ---------- Celular ---------- */
@media (max-width:640px){
  /* abas deslizam para o lado em vez de quebrar em várias linhas */
  .tabs,#prodFormTabs{flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:-4px;margin-right:-4px;padding:2px 4px 6px;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar,#prodFormTabs::-webkit-scrollbar{display:none}
  .tabs > button,#prodFormTabs > button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}

  /* indicadores em 2 colunas */
  .cards4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  .cards4 .mini{padding:12px !important}
  .cards4 .mini .n{font-size:18px !important;overflow-wrap:anywhere}
  #ordKPIsSummary{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #ordKPIsSummary .mini:first-child{grid-column:1/-1}

  /* Pedidos: filtros recolhidos atrás do botão */
  .m-filter-toggle{display:inline-flex;width:100%;justify-content:space-between}
  .m-filter-box{display:none !important}
  .m-filter-box.m-open{display:grid !important;grid-template-columns:1fr 1fr !important}
  .m-filter-box.m-open > .field:nth-child(-n+2){grid-column:1/-1}
  .m-filter-box.m-open > div:last-child{grid-column:1/-1}
  .m-filter-toggle[aria-expanded=true] .m-filter-arrow{transform:rotate(180deg)}

  /* Dashboard: período em 3 linhas — atalhos | datas | Aplicar */
  .dash-filter{display:flex !important;flex-wrap:wrap;gap:6px;width:100%}
  .dash-filter .qrbar{display:flex !important;flex:1 1 100%}
  .dash-filter .qrbar .btn{flex:1 1 0}
  .dash-filter input[type=date]{flex:1 1 calc(50% - 3px);min-width:0;width:auto}
  .dash-filter #dashGo{flex:1 1 100%}

  /* PDV: cabeçalho azul empilhado, sem sobreposição */
  .pdv-top-banner{flex-direction:column;align-items:stretch !important;gap:10px}
  .pdv-top-banner > div{width:100%;justify-content:flex-start}
  .pdv-top-banner > div:first-child > div{margin-left:0 !important;width:100%;justify-content:space-between}
  .pdv-top-banner select{max-width:100%}

  /* Cadastro de produto: preço/custo e estoque/unidade lado a lado */
  #pTabGeral .pf-row4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .pv-discount .pf-row3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .pv-discount .pf-row3 > .field:last-child{grid-column:1/-1}

  /* janelas ocupam a tela toda com rolagem suave */
  .modal-card{max-height:94vh;overflow:auto;-webkit-overflow-scrolling:touch}

  /* alvos de toque confortáveis */
  .btn-sm{min-height:34px}
  input,select,textarea{font-size:16px}  /* evita o zoom automático do iPhone ao focar */
}