/* ==========================================================================
   NuCofrinho Pro — Estilos Customizados Android PWA (Mobile-First)
   ========================================================================== */

:root {
  --nu-purple: #8A05BE;
  --nu-purple-light: #A855F7;
  --nu-purple-dark: #581C87;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  overscroll-behavior-y: contain;
  user-select: none;
}

/* Impede scroll da página de fundo quando um modal <dialog> está aberto */
body:has(dialog[open]) {
  overflow: hidden;
}

/* Estilização de Dialog Nativo HTML5 com animação estilo Bottom Sheet no Mobile */
dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 92vh;
}

dialog::backdrop {
  background: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

dialog[open] {
  animation: slideUpModal 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpModal {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Barra de Navegação Inferior Android com Safe Area */
.bottom-nav-safe {
  padding-bottom: calc(0.45rem + var(--safe-bottom));
}

/* Ocultar scrollbar mantendo o deslize horizontal de chips/carrosséis no Android */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Scrollbar elegante */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(138, 5, 190, 0.35);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(138, 5, 190, 0.65);
}

/* Modo de Impressão / Compartilhamento PDF Nativo Android */
@media print {
  .no-print {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  .print-card {
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    break-inside: avoid;
  }
}