/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — Media queries gerais (mobile)
   ════════════════════════════════════════════════════════════════ */

/* MAX 900 — Sidebar vira off-canvas, hambúrguer aparece, cards 2 colunas */
@media(max-width:900px){
  .hamburger{display:flex}
  .sidebar{
    position:fixed;
    top:0;
    left:-240px;
    height:100vh;
    padding-top:calc(64px + env(safe-area-inset-top));
    z-index:95;
    box-shadow:4px 0 20px rgba(0,0,0,.4);
  }
  .sidebar.open{left:0}
  .stats{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .full{grid-column:1}
  /* Em mobile, mantém o badge "Ouro · 132d" visível e esconde apenas avatar+nome */
  .nav-user .nav-avatar,
  .nav-user #nav-name{display:none}
}

/* MAX 768 — Nav esconde itens secundários */
@media(max-width:768px){
  .wa-nav-btn span#wa-nav-label{display:none}
  .wa-nav-btn{padding:.3rem .5rem;min-width:32px;justify-content:center}
  .logout-btn{padding:.3rem .5rem;font-size:11px}
  .nav-user #nav-name{display:none}
  .dark-btn,.search-nav-btn{width:28px;height:28px}
  /* Dashboard — cards em coluna única */
  .stats{grid-template-columns:1fr 1fr}
  /* Perfil — coluna única */
  #main-content .sec-hdr + div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
}

/* MAX 600 — Densificação geral */
@media(max-width:600px){
  .dash-grid{grid-template-columns:1fr!important}
  .content{padding:.75rem}
  .stats{grid-template-columns:1fr 1fr;gap:.6rem}
  .stat{padding:.85rem 1rem}
  .stat-value{font-size:1.35rem;letter-spacing:-.01em}
  .stat-label{font-size:9.5px;padding-right:24px}
  .stat-sub{font-size:11px;margin-top:6px}
  .stat-info{width:18px;height:18px;top:.5rem;right:.5rem}
  .stat-info svg{width:10px;height:10px}
  .nav-user span:not(.nav-badge){display:none}
  /* Tabelas — scroll horizontal suave */
  .tbl-wrap{border-radius:var(--rs);-webkit-overflow-scrolling:touch}
  table{font-size:12px}
  thead th{padding:.5rem .6rem;font-size:9px}
  tbody td{padding:.6rem .6rem}
  /* Botões menores */
  .btn-sm{padding:.35rem .7rem;font-size:12px}
  .btn-xs{padding:.2rem .5rem;font-size:11px}
  /* Filter pills */
  .filter-pills{gap:.3rem}
  .pill{padding:.25rem .7rem;font-size:11px}
  /* Sec header */
  .sec-hdr{gap:.4rem}
  .sec-title{font-size:1.1rem}
  /* Modal */
  .modal{max-width:100%!important;margin:.5rem}
  .mbody{padding:1rem}
  .mfooter{padding:.75rem 1rem;flex-wrap:wrap}
  /* WA modal */
  .wa-modal-inner{padding:1.25rem;margin:.5rem}
}

/* MAX 720 — Botão de instalar PWA fica icon-only */
@media(max-width:720px){
  .install-btn span{display:none}
  .install-btn{padding:.3rem .5rem;min-width:32px;justify-content:center}
}

/* MAX 640 — Gráficos do relatório (relat-grid) viram coluna única */
@media(max-width:640px){
  .relat-grid-a,.relat-grid-b{grid-template-columns:1fr!important}
  #chart-fluxo,#chart-proj,#chart-inad{max-height:180px}
  #chart-saude{max-height:140px}
  #chart-tipo{max-height:110px!important;max-width:110px!important}
}

/* MIN 769 — Bottom nav volta pra sidebar no desktop */
@media(min-width:769px){
  body.bottom-nav-mode .sidebar{display:flex!important}
  body.bottom-nav-mode #bottom-nav{display:none!important}
}

/* MAX 640 — Colunas mobile em tabelas */
@media(max-width:640px){
  .hide-mobile{display:none!important}
  /* Juros e Total também ficam menores */
  #th-sort-juros,#th-sort-total{display:none!important}
  .hide-mobile-juros{display:none!important}
}

/* MAX 640 — Perfil em coluna única */
@media(max-width:640px){.perfil-grid{grid-template-columns:1fr!important}}

/* PRINT — esconde navegação/botões */
@media print{
  .nav,.sidebar,.sb-overlay,.filter-pills,.btn,button,.mbd,.toast{display:none!important}
  .app-body{display:block!important}
  .content{padding:0!important}
  body,html{background:#fff!important}
  .stat,.card{box-shadow:none!important;border:1px solid #ddd!important}
}

/* MAX 400 — Plano de renovação 1 coluna */
@media(max-width:400px){.renov-plan-grid{grid-template-columns:1fr}}

/* MAX 480 — Nav mobile ajustes */
@media(max-width:480px){
  .nav-badge{max-width:110px;font-size:10px;padding:2px 7px}
  .nav-right{gap:.4rem}
  .logout-btn{display:none}
}

/* MAX 360 — Esconder botões dark/search */
@media(max-width:360px){
  .dark-btn,.search-nav-btn{display:none}
}