/* Tablet (até 1280px de largura: tablet em pé e deitado): o menu lateral vira gaveta por cima do conteúdo, as barras de filtro quebram em mais de uma linha
   sem cobrir o título, as tabelas largas rolam na horizontal (ou escondem colunas menos importantes) e os alvos de toque ficam maiores.
   Acima de 1280px nada aqui vale: o desktop continua exatamente como era. */
@media (max-width:1280px){
  .main, .main.sidebar-collapsed{margin-left:0!important}
  .sidebar{z-index:60;box-shadow:8px 0 30px rgba(0,0,0,.35)}
  .sidebar.collapsed{box-shadow:none}
  .sidebar-resize{display:none!important}
  .page{padding:16px 12px}

  /* barras de filtro fixas: ocupam a largura toda e quebram linha; a altura real é medida por app.js (--tb-h) para empurrar o título */
  .obras-toolbar-fixed{left:0!important;flex-wrap:wrap;gap:8px;padding:6px 12px}
  .obras-toolbar-fixed.tb-2row{padding:0;flex-wrap:nowrap}
  .tb-row1{flex-wrap:wrap;gap:8px;padding:6px 12px}
  .tb-row2{padding:6px 12px;gap:6px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tb-row2 > *{flex-shrink:0}
  .obras-toolbar-filters{flex:1 1 360px}
  .obras-fixed-actions{flex:0 0 auto;justify-content:flex-end;flex-wrap:wrap;margin-left:auto}
  #page-obras .ph, #page-projetos .ph, #page-entregas .ph, #page-instalacoes .ph, #page-automacoes .ph, #page-melhorias .ph,
  #forn-header, #emp-header{margin-top:calc(var(--tb-h, 44px) - 2px)!important}

  /* tabelas: a rolagem (vertical e horizontal) é da área .page-view-scroll, não do .tbl-box (senão o cabeçalho fixo deixa de acompanhar).
     Cabeçalho fixo na célula (th) em vez da linha (tr): o Safari do iPad não aplica sticky em <tr> e o cabeçalho saía desalinhado das colunas. */
  .sticky-thead-tbl thead tr{position:static}
  .sticky-thead-tbl thead th{position:sticky;top:0;z-index:5}
  table{table-layout:auto}
  th, td{padding:8px 10px;vertical-align:middle}
  /* o cartão (borda, fundo, cantos) acompanha a largura real da tabela: sem isto, ao rolar para a direita a tabela saía do cartão e perdia a formatação */
  #obras-tabela .tbl-box, #ent-view-tabela .tbl-box, #proj-table-view .tbl-box{width:max-content;min-width:100%;box-sizing:border-box}
  #obras-tabela .tbl-box > table, #ent-view-tabela .tbl-box > table, #proj-table-view .tbl-box > table{width:100%}
  /* altura da página = altura VISÍVEL (o Safari do iPad conta a barra do navegador no 100vh e escondia as últimas linhas) */
  #page-obras.page-flex, #page-projetos.page-flex, #page-entregas.page-flex{height:calc(100dvh - 52px)}
  /* colunas menos importantes saem no tablet (continuam no detalhe de cada linha) */
  .ent-table th:nth-child(5), .ent-table td:nth-child(5),
  .ent-table th:nth-child(8), .ent-table td:nth-child(8){display:none}          /* Entregas: Transporte e Maior peça */
  #obras-tabela th:nth-child(4), #obras-tabela td:nth-child(4),
  #obras-tabela th:nth-child(6), #obras-tabela td:nth-child(6),
  #obras-tabela th:nth-child(9), #obras-tabela td:nth-child(9){display:none}    /* Obras: Estado, Canal de vendas, Proposta comercial */
  #proj-table-view th:nth-child(3), #proj-table-view td:nth-child(3),
  #proj-table-view th:nth-child(6), #proj-table-view td:nth-child(6),
  #proj-table-view th:nth-child(8), #proj-table-view td:nth-child(8){display:none} /* Projetos: Tipo de orçamento, Valor unitário, Peso unitário */
  /* a primeira coluna (nome) não espreme e as demais não quebram linha: antes o nome ficava em 5 linhas e o Valor/Status eram cortados */
  .ent-table td:first-child, .ent-table th:first-child, #obras-tabela td:first-child, #obras-tabela th:first-child{min-width:210px}
  .ent-table td:not(:first-child), #obras-tabela td:not(:first-child), #proj-table-view td:not(:first-child){white-space:nowrap}

  /* topo */
  .topbar{padding:0 10px;gap:6px}
  #topbar-user-name{display:none}
  #sp-drawer{width:min(620px,100vw)}
}
@media (max-width:1000px){
  .ent-table th:nth-child(3), .ent-table td:nth-child(3), #obras-tabela th:nth-child(4), #obras-tabela td:nth-child(4){display:none}
}
@media (max-width:820px){
  .obras-toolbar-filters, .obras-fixed-actions{flex:1 1 100%}
  .ent-table th:nth-child(2), .ent-table td:nth-child(2),
  .ent-table th:nth-child(3), .ent-table td:nth-child(3){display:none}          /* Cidade e Estado */,
  #obras-tabela th:nth-child(3), #obras-tabela td:nth-child(3){display:none}
  .page{padding:12px 8px}
  .dash-kpi-row{grid-template-columns:repeat(2,1fr)}
}
/* telas de toque: botões e campos com área de toque confortável */
@media (pointer:coarse){
  button, .btn, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]){min-height:40px}
  .nav-item{min-height:44px}
}