/* ==========================================================================
   Ajustes responsivos (carregado por último).
   Vários blocos do painel usam estilo inline; por isso alguns seletores
   usam !important para sobrepor esses valores em telas pequenas.
   ========================================================================== */

/* A área principal é item flex do <body>; sem min-width:0 ela cresce até
   caber o elemento mais largo e a página inteira vaza para a direita. */
main.shell-container,
.tab-content,
.panel {
  min-width: 0;
  max-width: 100%;
}

/* Grades de cards: nunca exigem mais largura do que a tela tem */
.shell-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* Rankings de materiais lado a lado (mínimo de 480px no estilo inline) */
#tab-materiais > div[style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)) !important;
}

/* Gráfico mensal: 12 colunas não cabem no celular, então rola na horizontal */
.monthly-chart-grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tabelas sempre roláveis dentro do próprio painel */
.panel > div[style*="overflow-x"] {
  max-width: 100%;
}

/* Textos longos (nomes de áreas, materiais) quebram em vez de empurrar a tela */
.hbar-item strong,
.hbar-item .muted,
#chart-mat-uso span,
#chart-mat-valor span {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Tablets e celulares
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .shell-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Barras de ferramentas: título em cima, botões embaixo, ocupando a largura */
  .shell-toolbar,
  .panel:not(.kpi) > div[style*="justify-content: space-between"] {
    flex-direction: column;
    align-items: stretch !important;
  }
  .shell-toolbar > div,
  .panel:not(.kpi) > div[style*="justify-content: space-between"] > div {
    width: 100%;
    min-width: 0 !important;
  }

  /* Campos de busca e seletores com largura mínima fixa no inline */
  input.input,
  select.input {
    min-width: 0 !important;
    max-width: 100%;
  }
  .shell-toolbar input.input,
  input[id^="filter-"][type="text"] {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Botões quebram linha e ficam com área de toque confortável */
  .shell-toolbar .btn,
  .panel .btn-sm {
    min-height: 36px;
  }

  /* Painel de cenários do Orçamento 2027 (min-width 280/300px inline) */
  #tab-orc2027 div[style*="min-width: 280px"],
  #tab-orc2027 div[style*="min-width: 300px"] {
    min-width: 0 !important;
    width: 100%;
  }

  /* Filtros da auditoria empilhados */
  #tab-auditoria div[style*="min-width: 180px"],
  #tab-auditoria div[style*="min-width: 160px"],
  #tab-auditoria div[style*="min-width: 140px"] {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  #tab-auditoria input[type="date"] {
    width: 100%;
  }
  #tab-auditoria div[style*="display: flex; align-items: center; gap: 0.35rem;"] {
    width: 100%;
  }
  #tab-auditoria div[style*="display: flex; align-items: center; gap: 0.35rem;"] > div {
    flex: 1 1 0;
  }

  /* Rodapé do card de meta com três valores lado a lado */
  #tab-dashboard .panel > div[style*="justify-content: space-between; font-size: 0.82rem"] {
    flex-direction: column;
    gap: 0.25rem;
  }

  /* Ranking de estouro: coluna de barra com largura fixa de 220px */
  #tab-area th[style*="width: 220px"] {
    width: auto !important;
    min-width: 140px;
  }

  .kpi .kpi-value {
    font-size: 24px;
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   Celulares
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Cabeçalho */
  header {
    padding: 1rem 0 !important;
  }
  header h1 {
    font-size: 1.25rem !important;
  }
  header > .shell-container > div:first-child > div[style*="border-left"] {
    border-left: none !important;
    padding-left: 0 !important;
  }
  header .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Abas: rolagem horizontal com rótulos compactos */
  .tab-btn {
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
  }

  main.shell-container {
    padding-top: 1rem !important;
  }

  .panel {
    padding: 1rem !important;
  }

  /* Tabelas mais compactas (continuam roláveis na horizontal) */
  table.shell-table,
  .panel table {
    font-size: 0.8rem !important;
  }
  table.shell-table th,
  table.shell-table td {
    padding: 0.5rem 0.4rem !important;
  }

  /* Gráfico horizontal por área: cabeçalho de cada barra empilhado */
  .hbar-item > div:first-child {
    flex-direction: column;
    align-items: flex-start !important;
  }

  /* Modais ocupam a tela */
  .modal-overlay {
    padding: 0.5rem;
  }
  .modal-box {
    max-height: 95vh;
  }

  /* Notificações não cobrem a largura toda */
  #toast-container {
    left: 12px;
    right: 12px !important;
    bottom: 12px !important;
  }
  #toast-container > div {
    max-width: none !important;
  }
}

/* --------------------------------------------------------------------------
   Correções encontradas com emulação de aparelhos reais (Basecoat carregado)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Linhas de botões/etiquetas definidas inline: quebram linha em vez de alargar a página */
  /* (blocos em coluna ficam de fora: neles a quebra faria cada item crescer até o conteúdo) */
  .tab-content [style*="display: flex"]:not([style*="flex-direction: column"]),
  .tab-content [style*="display: inline-flex"]:not([style*="flex-direction: column"]),
  #lista-acoes > div,
  #lista-pendencias > div {
    flex-wrap: wrap;
  }
  .tab-content [style*="display: flex"] > *,
  .tab-content [style*="display: inline-flex"] > * {
    min-width: 0;
  }

  /* Basecoat impede quebra de texto em botões e etiquetas */
  .tab-content .btn,
  .tab-content .badge,
  .tab-content button {
    white-space: normal;
    height: auto;
    text-align: center;
  }

  /* Cards de ações e pendências: texto ocupa a largura, botão de fechar no canto */
  #lista-acoes > div > div:first-child,
  #lista-pendencias > div > div:first-child {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Alternador Mês / Acumulado e botões de cenário 2027 */
  #btn-visao-area-mes,
  #btn-visao-area-acum {
    flex: 1 1 auto;
  }
  .btn-cenario {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* Campos de data têm largura mínima própria no navegador */
  input[type="date"] {
    min-width: 0;
    width: 100%;
  }

  /* Ordenação do ranking por base */
  .btn-rank-sort {
    flex: 1 1 auto;
  }
}

/* Proteção final: nenhum elemento pode forçar o celular a reduzir o zoom da página.
   Usa "clip" (e não "hidden") e só na área de conteúdo: "hidden" no html/body
   transforma o body num contêiner de rolagem, o que trava a rolagem por toque
   no celular e solta a barra de abas fixa. Tabelas e gráfico continuam
   roláveis dentro dos próprios quadros. */
header,
.nav-tabs-wrapper,
main.shell-container,
footer {
  overflow-x: clip;
}

@media (max-width: 640px) {
  /* Rankings de materiais: coluna única que pode encolher abaixo do conteúdo mínimo */
  #tab-materiais > div[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  /* Cabeçalho compacto: em celular ele ocupava quase a tela inteira */
  header .header-logo-equatorial { height: 30px; }
  header p { font-size: 0.8rem !important; }
  header h1 { font-size: 1.1rem !important; }
  header > .shell-container > div:last-child { width: 100%; flex-wrap: nowrap !important; }
  header .btn {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.72rem !important;
    padding: 0.4rem 0.3rem !important;
    white-space: normal;
    height: auto;
    line-height: 1.2;
  }
}

/* Basecoat define overscroll-behavior: none no body, o que desliga o "puxar
   para atualizar" e o efeito elástico de fim de página no celular. */
body {
  overscroll-behavior-y: auto;
}