/* ============================================================
   responsive.css — Breakpoints e ajustes mobile
   Abordagem: Desktop-first com adaptações para telas menores
   ============================================================ */

/* ── Tablet (≤ 1024px) ───────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .g2 { grid-template-columns: 1fr 1fr; }
  .modal-lg { max-width: 95vw; }
}

/* ── Mobile grande (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {
  /* Sidebar vira drawer */
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }

  /* Main ocupa toda a largura */
  .main-area { margin-left: 0 !important; }

  /* Botão hamburguer aparece */
  .mob-btn { display: flex !important; align-items: center; justify-content: center; }

  /* Content padding menor */
  .content { padding: 12px; }

  /* Grids viram coluna única */
  .g2  { grid-template-columns: 1fr; }
  .gc  { grid-template-columns: 1fr; }
  .gs  { grid-template-columns: repeat(2, 1fr); }

  /* Modal fullscreen */
  .modal { max-width: 100% !important; padding: 16px !important; border-radius: var(--r-lg); }
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-height: 96dvh; }

  /* Topnav compacto */
  .topnav-bar { padding: 8px 12px; padding-left: 52px; }
  .topnav-user-pill { display: none; }

  /* Filtros fullwidth */
  .filter-bar { flex-direction: column; }
  .filter-bar .input,
  .filter-bar .select { max-width: none; }

  /* Input row vira coluna */
  .input-row { grid-template-columns: 1fr; }

  /* Section header */
  .section-header { flex-direction: column; align-items: flex-start; }
  .section-title { font-size: 18px; }

  /* Tabela scroll horizontal */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 560px; }

  /* Ocultar colunas de baixa prioridade */
  .hide-mobile { display: none !important; }
}

/* ── Mobile pequeno (≤ 480px) ────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --sp-lg: 14px;
    --sp-xl: 22px;
  }
  .gs { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 12px 14px; }
  .btn-lg { padding: 10px 18px; }
  .modal { padding: 14px !important; }
  .section-title { font-size: 17px; }
  .topnav-scroll { gap: 4px; }
  .topnav-btn { padding: 6px 9px; font-size: 11px; }
  .tab-btn { padding: 6px 11px; font-size: 12px; }
}

/* ── Landscape mobile ────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .modal { max-height: 90dvh; }
  .content { padding: 10px 14px; }
}

/* ── Large screens ───────────────────────────────────────── */
@media (min-width: 1400px) {
  .content { max-width: 1400px; }
  .gc { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ── Preferência de redução de movimento ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Dark mode via sistema operacional (fallback se JS desativado) */
@media (prefers-color-scheme: light) {
  body:not([data-theme="dark"]) {
    --bg: #f0f4fb; --bg2: #e8edf8; --bg3: #e0e7f5; --bg4: #ffffff;
    --bg5: #f5f8fe; --bg6: #eaeef8; --bg7: #dde4f2; --bg8: #cdd6ea;
    --t1: #1a2040; --t2: #2c3860; --t3: #3d5080; --t4: #5a6898;
    --t5: #6b78a8; --t6: #8890b8;
    --bd: #dde4f2; --bd2: #cdd6ea; --inp: #f0f4fb; --inp-f: #e8edf8;
  }
}

/* ── Print ───────────────────────────────────────────────── */
@media print {
  .sidebar, .topnav-bar, .mob-btn, .btn, .no-print { display: none !important; }
  .main-area { margin-left: 0 !important; }
  .content { padding: 0 !important; max-width: none !important; }
  body { background: white !important; color: black !important; }
}