/*
======================================================
  RESPONSIVE — Ajustes mobile / tablet / notebook
======================================================
  Importar DEPOIS de saas-minimal.css em todas as páginas.
  Breakpoints: <480 | 480-768 | 768-1024 | >1024
======================================================
*/

/* ── Touch targets (Apple HIG / Google Material: min 44px) ── */
@media (max-width: 768px) {
  button,
  a[href],
  select,
  input[type="submit"],
  .saas-btn {
    min-height: 44px;
  }
  select, input, textarea {
    font-size: 16px !important; /* Impede zoom automático em iOS */
  }
}

/* ── Container: padding menor em mobile ── */
@media (max-width: 480px) {
  .saas-container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  main {
    padding: 0.75rem !important;
  }
}

/* ── Header compacto em mobile ── */
@media (max-width: 640px) {
  header {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ── Cards de métricas: melhor distribuição ── */
@media (max-width: 480px) {
  [class*="grid-cols-1"][class*="sm:grid-cols-3"],
  [class*="grid-cols-1"][class*="sm:grid-cols-2"] {
    gap: 0.75rem !important;
  }
}

/* ── Gráficos Chart.js: altura mínima em mobile ── */
@media (max-width: 768px) {
  canvas {
    min-height: 140px;
  }
  #chart-weekly, #chart-fluxo, #chart-pizza {
    min-height: 150px !important;
  }
}

/* ── Modais: fullscreen em mobile ── */
@media (max-width: 640px) {
  .saas-modal,
  [class*="max-w-md"],
  [class*="max-w-lg"],
  [class*="max-w-xl"],
  [class*="max-w-2xl"] {
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  [class*="fixed"][class*="inset-0"][class*="flex"][class*="items-center"] {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  [class*="fixed"][class*="inset-0"] > [class*="rounded"] {
    border-radius: 0 !important;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* ── Toolbar de filtros/ações: wrap em mobile ── */
@media (max-width: 640px) {
  [class*="flex"][class*="gap"] {
    flex-wrap: wrap;
  }
}

/* ── Sidebar: ajustes de largura no drawer ── */
@media (max-width: 768px) {
  #sidebar {
    width: 280px !important;
    max-width: 85vw !important;
  }
}

/* ── Tabelas: texto menor em mobile ── */
@media (max-width: 640px) {
  table {
    font-size: 0.8rem;
  }
  table th, table td {
    padding: 0.5rem 0.6rem !important;
  }
}

/* ── Títulos: escala proporcional ── */
@media (max-width: 480px) {
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
}

/* ── Desabilitar efeitos hover/glow pesados em touch ── */
@media (hover: none) {
  .glow-card:hover {
    transform: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  }
  .hover-lift:hover,
  .hover-float:hover,
  .floating-stats-hover:hover {
    transform: none !important;
  }
  .glow-border:hover::before {
    opacity: 0 !important;
  }
}

/* ── Custom cursor: desligar em touch ── */
@media (pointer: coarse) {
  #cursor-ring, #cursor-dot {
    display: none !important;
  }
  * {
    cursor: auto !important;
  }
}

/* ── Decorativos: esconder TODAS as esferas de blur em mobile ── */
@media (max-width: 768px) {
  [class*="blur-"][class*="pointer-events-none"] {
    display: none !important;
  }
}

/* ── Backdrop-filter: desligar em mobile (causa fundo branco/turvo) ── */
@media (max-width: 768px) {
  .backdrop-glow {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── Cards/Header/Sidebar: fundo sólido em mobile (sem transparência) ── */
@media (max-width: 768px) {
  .glow-card,
  [class*="bg-[#0e1a2a]"],
  [class*="bg-[#142033]"] {
    background-color: #0e1a2a !important;
  }
  header {
    background-color: #0b1620 !important;
  }
  #sidebar {
    background-color: #0e1a2a !important;
  }
}

/* ── Tablet paisagem (768-1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .saas-container {
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}