/* =========================================================
   Responsivo — tablet e mobile (< 768px)
   ========================================================= */

/* Sidebar só existe em telas médias+; bottom nav só no mobile */
@media (min-width: 768px) {
  .app-nav-mobile { display: none; }
}

@media (max-width: 991.98px) {
  .app-header { padding: var(--space-4) var(--space-5) var(--space-3); }
  .app-body { padding: 0 var(--space-5) var(--space-6); }
  .app-shell.has-mobile-nav .app-body {
    padding-bottom: calc(var(--mobile-nav-height) + var(--space-6));
  }
}

@media (max-width: 767.98px) {
  .app-sidebar { display: none; }
  .app-main { margin-left: 0; }

  .app-header {
    padding: var(--space-4) var(--space-4) var(--space-3);
    align-items: flex-start;
  }
  .app-header .titleblock h1 { font-size: 20px; }
  .app-header .titleblock .desc { font-size: 13px; }
  .app-header-actions { width: 100%; }
  .app-header-actions .btn-primary-cta { flex: 1 1 auto; }

  .app-body { padding: 0 var(--space-4) var(--space-5); }
  .app-shell.has-mobile-nav .app-body {
    padding: 0 var(--space-4) calc(var(--mobile-nav-height) + var(--space-5));
  }

  /* Alvos de toque mínimos de 44px */
  .btn-primary-cta, .btn-ghost { min-height: 44px; }
  .form-control, .form-select { min-height: 44px; font-size: 16px; /* evita zoom no iOS */ }
  .form-control-sm, .form-select-sm { min-height: 40px; font-size: 14px; }
  .btn-outline-soft { min-height: 36px; min-width: 36px; }

  /* Métricas: 2 por linha quando couber */
  .metric-card { padding: var(--space-4); }
  .metric-card .metric-value { font-size: 22px; }

  /* Gráficos um pouco mais baixos */
  .chart-wrap { height: 260px; }
  .chart-wrap.tight { height: 240px; }

  /* Modal ocupa a largura quase toda e gruda no rodapé */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
  }
  .modal-dialog .modal-content {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }
  .modal-dialog .modal-body { overflow-y: auto; }
  .modal-footer { flex-direction: column-reverse; }
  .modal-footer .btn-primary-cta, .modal-footer .btn-ghost { width: 100%; }

  /* Paginação/resumo empilham */
  .list-summary { justify-content: center; }
}

/* Em telas pequenas, mantém 2 cards de métrica por linha
   apenas quando há largura suficiente */
@media (max-width: 400px) {
  .metric-col { flex: 0 0 100%; max-width: 100%; }
}

/* Respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}