@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 {

    /* Estilos globais */
    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 */

    /* body */
    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 */


    /* Container */
    .container-title {
        @apply text-2xl absolute top-20;
        @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;
    }

    .container {
        /* Deixe APENAS as classes de largura, margem e padding */
        @apply w-full mx-auto px-4 sm:px-6 lg:px-8 mt-15 mb-10;
    }

    .container-form {
        @apply w-full h-full mx-auto;
        @apply flex justify-center items-center;
    }

    .messages {
        @apply flex justify-center;
    }

    .form-class {
        @apply flex flex-col gap-4 p-3;
        @apply mb-10 w-1/5;
    }

    .form-input-class {
        @apply border border-gray-300 rounded-md p-2 outline-none;
    }

    .form-button-class {
        @apply bg-blue-500 text-white rounded-md p-2 cursor-pointer hover:bg-blue-800 w-1/2;
    }

    .forget-password {
        @apply flex justify-center w-1/2;
        @apply shadow-lg rounded-md;
        @apply transition scale-80 hover:scale-95;
    }

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