src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-gray-50 text-gray-900 font-sans;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Otimização para renderização */
  .will-change-auto {
    will-change: auto;
  }
  
  .will-change-scroll {
    will-change: scroll-position;
  }
  
  .will-change-transform {
    will-change: transform;
  }

  /* Lazy loading para imagens */
  img {
    loading: lazy;
    decoding: async;
  }
}

@layer components {
  .grid-cell {
    @apply w-8 h-8 border border-gray-300 flex items-center justify-center text-xs font-semibold cursor-pointer transition-all duration-200;
  }
  
  .grid-cell-marked {
    @apply bg-loto-blue text-white border-blue-600 shadow-md transform scale-105;
  }
  
  .grid-cell-unmarked {
    @apply bg-white hover:bg-gray-100;
  }
  
  .sidebar-item {
    @apply flex items-center space-x-3 px-4 py-3 text-gray-700 hover:bg-gray-100 hover:text-blue-600 cursor-pointer transition-all duration-200 rounded-lg;
  }
  
  .sidebar-item-active {
    @apply bg-blue-100 text-blue-700 border-r-4 border-blue-600;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg border border-gray-200 p-6 hover:shadow-xl transition-all duration-300;
  }
  
  .btn-primary {
    @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 transition-all duration-200 font-medium;
  }
  
  .btn-secondary {
    @apply bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 focus:ring-4 focus:ring-gray-100 transition-all duration-200 font-medium;
  }
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}