/* ===== Media Queries ===== */
@media(max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr }
  .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
  .charts-grid { grid-template-columns: 1fr }
}

@media(max-width: 768px) {
  #sidebar { position: fixed; top: 0; left: 0; height: 100%; transform: translateX(-100%); z-index: 200 }
  #sidebar.open { transform: translateX(0) }
  #hamburger { display: flex }
  #main { width: 100% }
  #topbar { padding: 0 10px 0 48px; gap: 5px; min-height: 48px }
  .topbar-title { font-size: 13px; flex-shrink: 0 }
  .period-tabs { display: none }
  .date-range-wrap input[type=date] { width: 100px; font-size: 11px }
  #filterConsultor, #filterTipoLoja, #userRole { display: none }
  #content { padding: 10px 12px }
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 8px }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px }
  .kpi-value { font-size: 15px }
  .filter-row { gap: 5px }
  .filter-row select { flex: 1; max-width: 100% }
  .modal-overlay { padding: 0; align-items: flex-end }
  .modal { border-radius: 16px 16px 0 0; max-height: 92vh }
  .col-m-hide { display: none !important }
  .charts-grid { grid-template-columns: 1fr }
}

@media(max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr 1fr }
  .login-header { padding: 20px }
  .login-body, #resetPanel, #resetSentPanel { padding: 20px }
}