/* ===========================================================================
   naveg-responsive.css — camada CORRETIVA de responsividade do Naveg Hub.
   ---------------------------------------------------------------------------
   Carregada por ULTIMO em cada pagina, depois do <style> inline. Nao substitui
   o CSS de nenhuma pagina: so corrige transbordo horizontal.

   Principio: em tela larga (sala de controle, monitor grande) o layout fica
   IDENTICO ao de hoje. Quase toda regra vive dentro de media query estreita.
   As unicas regras sem media query sao o container de scroll de tabela e a
   quebra de celula longa — ambas seguras em qualquer largura.

   O que esta camada NAO faz, de proposito:
   - nao mexe em elemento com transform (gavetas .detail/.drawer ficam
     estacionadas fora da tela quando fechadas — isso e o estado correto);
   - nao usa overflow:hidden em lugar nenhum (esconderia informacao);
   - nao altera cor, fonte nem espacamento do design system (DESIGN.md).
   =========================================================================== */

/* --- 1. Tabela larga rola dentro da propria caixa ------------------------- */
/* O wrapper e criado pelo naveg-responsive.js quando a tabela ainda nao tem
   um ancestral rolavel. Aqui so vem a aparencia do container.               */
.nv-scroll {
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.nv-scroll > table { max-width: none; }

/* Barra de rolagem discreta, no tom do painel. */
.nv-scroll::-webkit-scrollbar { height: 9px; }
.nv-scroll::-webkit-scrollbar-track { background: transparent; }
.nv-scroll::-webkit-scrollbar-thumb {
  background: rgba(148, 164, 187, .28);
  border-radius: 6px;
}
.nv-scroll:hover::-webkit-scrollbar-thumb { background: rgba(148, 164, 187, .45); }

/* --- 2. Celula com texto longo pode quebrar ------------------------------- */
/* Aplica-se so a celulas SEM nowrap explicito — respeita quem pediu nowrap
   de proposito (IP, serial, data). Evita a linha unica de 1200px.           */
td:not([class*="nowrap"]), th:not([class*="nowrap"]) { overflow-wrap: anywhere; }

/* --- 3. Correcoes de largura estreita ------------------------------------ */
@media (max-width: 900px) {

  /* 3.1 Nada rola o corpo da pagina para o lado. */
  html, body { max-width: 100%; }

  /* 3.2 Barras de ferramentas quebram em vez de empurrar botao para fora.
         Cobre os padroes achados na varredura: .topbar-right (whatsapp),
         .feed-hdr (mapa), toolbars/filtros em geral.                        */
  .topbar-right, .topbar-left, .topbar,
  .toolbar, .filters, .filtros, .actions, .btn-row, .head-actions,
  .feed-hdr, .card-head, .panel-head, .sec-head {
    flex-wrap: wrap;
  }

  /* 3.3 Grades de N colunas fixas passam a caber. Nao toca em grid
         de 1 ou 2 colunas, que ja cabem.                                     */
  .grid, .cards, .kpis, .kpi-grid, .stats, .tiles, .metrics {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }

  /* 3.4 Nenhum bloco de conteudo mantem min-width maior que a tela.
         Escopo estreito: so classes de container, nunca tabela nem gaveta.   */
  .card, .panel, .box, .sec, .section, .content, .main, .wrap, .container {
    min-width: 0 !important;
  }

  /* 3.5 Campo de busca deixa de forcar largura fixa (devices.html). */
  input[type="text"], input[type="search"], .search-input, select, textarea {
    max-width: 100%;
  }

  /* 3.6 Midia nunca estoura. */
  img, svg, canvas, video, iframe { max-width: 100%; }
}

/* --- 4. Mensagem de "vazio" acompanha a rolagem --------------------------- */
/* Em tabela larga, o aviso de lista vazia ficava centralizado a 1100px de
   distancia — visivel so depois de rolar. Fixa no inicio da linha.          */
.nv-scroll .state-box,
.nv-scroll td.empty,
.nv-scroll .empty-state {
  position: sticky;
  left: 0;
  max-width: 100vw;
}

/* --- 5. Acessibilidade de foco ------------------------------------------- */
/* O container de scroll recebe foco por teclado; sem isto ele ficaria
   rolavel so por mouse.                                                     */
.nv-scroll:focus-visible { outline: 2px solid #2dd4bf; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nv-scroll { scroll-behavior: auto; }
}