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

/* Custom Styles */
@layer utilities {
  .form-control {
    @apply text-gray-600 placeholder-gray-400 px-4 py-3 w-full rounded-lg focus:outline-none mb-4 bg-gray-500;
  }
}

/* Transição suave para alternância */
body {
  transition: background-color 0.3s, color 0.3s;
  font-family: Arial, sans-serif;
}

/* Tema Claro */
body.light * {
  --primary-color: #fff;
  --secondary-color: #1a202c;
}

/* Tema Escuro */
body.dark * {
  --primary-color: #616161;
  --secondary-color: #1a202c;
}

/* Navegação - Tema Claro */
body nav {
  background-color: var(--primary-color); /* Fundo do menu claro */
  border-color: var(--secondary-color); /* Borda clara */
}

body.dark nav a {
  color: black; /* Links no menu em tema claro */
}

body.dark nav span {
  color: white; /* Links no menu em tema claro */
}

body.light nav button {
  background-color: #f97316; /* Botão laranja */
  color: #ffffff; /* Texto branco no botão */

}body.dark nav input {
  background-color: #374151; /* Fundo do menu escuro */
  border-color: #1a202c; /* Borda levemente destacada */
}

/* Navegação - Tema Escuro */
body.dark nav {
  background-color: #4b5563; /* Fundo do menu escuro */
  border-color: white; /* Borda levemente destacada */
}

body.dark nav a {
  color: #f3f4f6; /* Links no menu em tema escuro */
  transition: color 0.2s ease-in-out; /* Animação suave */
}

body.dark nav a:hover {
  color: #f97316; /* Destaque laranja nos links ao passar o mouse */
}

body.dark nav button {
  background-color: #f97316; /* Fundo do botão escuro */
  color: #f3f4f6; /* Texto claro no botão */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Animação */
}
body.dark nav button:hover {
  background-color: #fb923c; /* Botão laranja mais claro ao passar o mouse */
  transform: scale(1.05); /* Leve aumento no botão */
}

body.dark a {
  transition: color 0.2s ease-in-out;
}

body.dark a:hover {
  color: #f97316; /* Destaque laranja para links ao passar o mouse */
}

body.dark .bg-gray-700 {
  background-color: #1f2937; /* Fundo levemente mais escuro */
}

body.dark .bg-orange-400 {
  background-color: #f97316; /* Fundo laranja */
}

body.dark .bg-orange-400:hover {
  background-color: #fb923c; /* Laranja mais claro ao passar o mouse */
}

body.dark .border-gray-600 {
  border-color: #4b5563; /* Borda mais destacada */
}

body.dark .text-gray-100 {
  color: #f3f4f6; /* Texto claro */
}

body.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4); /* Sombra escura */
}

/* aside */

/* Estilos para o <aside> no tema escuro */
body.dark aside {
  background-color: #4b5563; /* Fundo escuro */
  color: #f3f4f6; /* Texto claro */
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark aside a {
  color: #f3f4f6;
  display: flex; /* Para alinhar ícones e texto */
  align-items: center; /* Centraliza ícones verticalmente */
  border-radius: 0.5rem; /* Bordas arredondadas */
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark aside a:hover {
  background-color: #374151;
  color: #f97316; /* Destaque laranja */
}

body.dark aside .active {
  background-color: #f97316; /* Fundo laranja para item ativo */
  color: #1f2937; /* Texto escuro */
  font-weight: bold;
}
 body.dark aside div {
  color: #f3f4f6; /* Texto escuro */
}

/* body.dark aside h2,
body.dark aside h3 {
  color: #f97316;
  margin-bottom: 1rem;
  font-weight: bold;
} */


body.dark aside .icon {
  color: #f97316; /* Ícones com cor laranja */
}

body.dark aside .divider {
  height: 1px;
  background-color: #4b5563; /* Linha divisória */
  margin: 1rem 0;
}

body.dark aside span {
  color: white; /* Links no menu em tema claro */
}

/* Garantir espaçamento inferior consistente no final
body.dark aside .footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid #4b5563;
} */