/* css/style.css */

/* Importa a fonte Inter do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Estilos globais para o corpo da página */
body {
    font-family: 'Inter', sans-serif;
    /* As cores de fundo e texto são definidas no Tailwind config e aplicadas no header.php */
}

/* Garante que o main ocupe o espaço restante */
main {
    flex-grow: 1;
}

/* Estilos para formulários e inputs (aprimorando o Tailwind) */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"], /* Adicionado para inputs numéricos */
select,
textarea { /* Adicionado para textareas */
    @apply transition duration-300 ease-in-out;
    /* Estilos de foco personalizados */
    &:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4); /* primary color com opacidade */
        border-color: #6366F1; /* primary color */
    }
}

/* Estilos para botões (aprimorando o Tailwind) */
button[type="submit"],
.button {
    @apply transition duration-300 ease-in-out;
    /* Efeito de sombra e escala no hover */
    &:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    &:active {
        transform: translateY(0) scale(0.98);
    }
}

/* Estilos específicos para a tabela de gestão de usuários */
.overflow-x-auto {
    /* Garante que a tabela seja scrollable em telas pequenas */
    -webkit-overflow-scrolling: touch; /* Melhora o scroll em iOS */
}

table {
    border-collapse: separate; /* Permite bordas arredondadas na tabela */
    border-spacing: 0;
}

table thead th:first-child {
    border-top-left-radius: 0.75rem; /* rounded-tl-lg */
}

table thead th:last-child {
    border-top-right-radius: 0.75rem; /* rounded-tr-lg */
}

table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.75rem; /* rounded-bl-lg */
}

table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.75rem; /* rounded-br-lg */
}

/* Adiciona um pouco de estilo para as linhas da tabela */
table tbody tr:nth-child(even) {
    background-color: #F3F4F6; /* bg-gray-100 para linhas pares */
}

table tbody tr:hover {
    background-color: #E5E7EB; /* bg-gray-200 no hover */
}

/* Estilo para links de navegação */
nav a {
    @apply transition duration-300 ease-in-out;
}

/* Estilo para o container principal das páginas de login/registro/dashboard */
.min-h-screen.flex.items-center.justify-center {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* Estilos para os cartões na dashboard */
.grid > div {
    @apply transform transition-all duration-300;
}
.grid > div:hover {
    @apply scale-105 shadow-xl;
}

/* Estilos específicos para os cards de indicadores */
.relative.p-6.rounded-lg.shadow-lg.text-white {
    /* Garante que o conteúdo esteja acima da imagem de fundo */
    position: relative;
    overflow: hidden; /* Para garantir que a imagem de fundo não vaze */
}

.relative.p-6.rounded-lg.shadow-lg.text-white .absolute {
    /* Estilo para a imagem de fundo de placeholder */
    z-index: 0;
    filter: brightness(0.7); /* Escurece a imagem para o texto ficar legível */
}

.relative.p-6.rounded-lg.shadow-lg.text-white .relative.z-10 {
    /* Garante que o texto esteja acima da imagem de fundo */
    position: relative;
    z-index: 10;
}