Nexus-InglineSystems/resources/css/app.css

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@import './toast.css';
@import './client-form.css';
@import './user-form-modal.css';
@import './header.css';
@import './client-cards.css';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer utilities {
    .forget-password>a {
        color: black !important;
    }

    .navbar-items>a {
        color: black !important;
    }
}

@layer components {

    /* body (Seu código, está correto) */
    body {
        @apply bg-white h-screen w-screen;
        background-image: url('../images/bg-primary.png');
        @apply bg-cover bg-center bg-fixed;
        @apply overflow-y-auto overflow-x-hidden;
    }

    /*End body */

    /* Estilos globais (Seu código) */
    h1 {
        @apply text-black font-semibold;
        @apply border-b border-blue-500 rounded-md shadow-md shadow-blue-400;
        @apply p-4 transition-all duration-300 transform hover:scale-105;
    }

    * {}

    /* Fim estilos globais */


    /* --- ESTILOS DO LOGIN REFORMULADOS --- */

    /* 1. Container de Centralização */
    .container-form {
        @apply w-full min-h-screen mx-auto;
        /* Garante altura total */
        @apply flex justify-center items-center p-4;
    }

    /* 2. O Card de Login "Vidro Fosco" */
    .form-class {
        @apply w-full max-w-md;
        /* Tamanho responsivo */
        @apply p-8;

        /* O EFEITO "VIDRO FOSCO" */
        @apply bg-white/20 backdrop-blur-lg;
        /* Fundo 20% opaco + Borrão */
        @apply rounded-xl shadow-2xl;
        @apply border border-white/10;
        /* Borda sutil */
    }

    /* 3. A Logo */
    .container-title {
        @apply flex justify-center mb-6 text-nowrap;
    }

    .container-message {
        @apply flex justify-center mb-6 text-nowrap;
    }

    .container-title img {
        @apply h-10;
        /* Ajuste o tamanho da sua logo */
    }

    /* 4. Título ("Efetue seu login") */
    .form-title {
        @apply text-2xl font-semibold text-black text-center mb-6;
    }

    /* 5. Grupo de Input (Label + Campo) */
    .input-group {
        @apply mb-4;
    }

    .form-label {
        @apply block text-sm font-medium text-gray-800 mb-1;
    }

    /* 6. Inputs com Estilo "Vidro" */
    .form-input-class {
        @apply w-full p-3;
        @apply bg-transparent;
        /* Fundo transparente */
        @apply border-b-2 border-gray-200;
        /* Apenas borda inferior */
        @apply text-gray-500 placeholder-white/70;
        @apply focus:outline-none focus:ring-0;
        @apply focus:border-white;
        /* Borda fica branca sólida no foco */
        @apply transition-all duration-300;
    }

    /* Remove o fundo de preenchimento automático do navegador */
    .form-input-class:-webkit-autofill {
        -webkit-text-fill-color: #0f0e0e !important;
        -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.1) inset !important;
        transition: background-color 5000s ease-in-out 0s;
    }


    /* 7. Botão Principal */
    .form-button-class {
        @apply w-full;
        /* Botão com largura total */
        @apply bg-blue-600 text-white rounded-md p-3;
        @apply font-semibold text-base;
        @apply cursor-pointer;
        @apply hover:bg-blue-700;
        @apply transition-all duration-300 transform hover:scale-105;
    }

    /* 8. Link "Esqueceu a senha" */
    .forget-password {
        @apply text-center mt-4;
    }

    .forget-password a {
        @apply text-sm text-white/80 hover:text-white hover:underline;
        @apply transition-colors;
    }

    .messages div[role="alert"] {
        /* Assumindo que seu componente renderiza um div */
        @apply bg-red-500/50 text-white p-3 rounded-md border border-red-700 text-sm;
    }

    .messages {
        @apply flex justify-center mb-4;
        @apply bg-white/10 backdrop-blur-md;
        @apply border border-white/10;
        @apply shadow-lg rounded-lg;
        @apply text-red-300 font-semibold p-4 text-sm;
    }

    .container {
        @apply w-full mx-auto px-4 sm:px-6 lg:px-8 mt-15 mb-10;
    }

    .container h1 {
        @apply text-2xl font-bold transition-all duration-300 transform hover:scale-105 mb-4;
    }
}