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

body {
  font-family: 'Inter', sans-serif;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #1f2937;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite !important;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}


/* filepath: c:\Projetos\Vision Cockpit\Vision_Cockpit\frontend\static\frontend\index.css */
.results-container {
  height: calc(100vh - 200px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.results-container>div {
  flex: 1;
  overflow: hidden;
  /* Garante que o conteúdo não ultrapasse o contêiner */
}



/* Fallback para cores estáticas */
.bg-blue-600 {
  background-color: #2563eb !important;
}

.bg-green-600 {
  background-color: #16a34a !important;
}

.bg-pink-600 {
  background-color: #db2777 !important;
}

.bg-gray-900 {
  background-color: #111827 !important;
}

.bg-gray-800 {
  background-color: #1f2937 !important;
}

.bg-gray-700 {
  background-color: #374151 !important;
}

.text-white-fallback {
  color: #ffffff !important;
}


/* Loader atualizado */
.loader {
  border: 4px solid rgba(255, 255, 255, 0.2);
  /* Cor da borda externa */
  border-top: 4px solid #2563eb;
  /* Cor da borda superior (efeito de rotação) */
  border-radius: 50%;
  /* Forma circular */
  width: 30px;
  /* Largura do loader */
  height: 30px;
  /* Altura do loader */
  animation: spin 1s linear infinite;
  /* Animação de rotação */
}

/* Animação de rotação */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loader-white {
  border: 4px solid rgba(255, 255, 255, 0.3);
  /* Cor da borda externa */
  border-top: 4px solid #ffffff;
  /* Cor branca para o topo */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@layer utilities {
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }
}

/* Garante que o container principal ocupe toda a altura */
html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.client-row {
  box-sizing: border-box;
  contain: layout style;
  /* Otimiza renderização */
  min-height: 60px;
  /* Altura mínima de fallback */
}

/* Forçar recálculo suave durante transições */
main {
  will-change: transform;
  overflow-anchor: none;
  /* Previne scroll automático */
}

@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

.animate-scroll-vertical {
  animation: scroll-vertical 5s linear infinite;
  z-index: 1; /* Bem baixo! */
  will-change: transform;
}