@import 'tailwindcss';

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

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

    /* body */
    body {
        @apply bg-white h-screen w-screen;
        background-image: url('../images/bg-primary.png');
        @apply bg-cover bg-center;
        @apply overflow-y-hidden;
    }

    /*End body */

    /* Header - Navbar */
    .nav-bar {
        @apply flex flex-nowrap justify-center items-center mx-auto px-4 sm:px-6 lg:px-8 h-10;
        @apply relative;
        /* Colors */
        @apply bg-white text-black;
        /* Border */
        @apply border-b border-white shadow-md shadow-blue-400;
    }

    .nav-bar>.navbar-items>a:hover,
    .nav-bar>.navbar-items>a {
        @apply transition-all duration-300 transform hover:scale-105;
        @apply mr-7;
        @apply hover:border hover:shadow-md shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform hover:scale-105;
    }

    .nav-bar-logo {
        /* Garante que a largura não ultrapasse 100% */
        @apply rounded-md max-w-25 mr-10;
        height: auto;
        /* Altura proporcional à largura */
    }

    .navbar-items {
        @apply flex flex-nowrap justify-center items-center px-4 sm:px-6 lg:px-8 h-10;
    }

    .profile-menu {
        @apply absolute right-5;
    }

    .profile-list-items {
        /* 1. Posicionamento (Correto) */
        @apply absolute top-full right-0 ml-4;

        @apply block w-full;
        /* Adicionei mt-2 para descolar do ícone */

        /* 2. Largura Fixa (Mais limpo) */
        @apply w-56;

        /* 3. Estilos do Contêiner (Profissional) */
        @apply bg-white p-2 rounded-md shadow-xl;
        /* Sombra mais forte */
        @apply border border-gray-200;

        /* 4. Divisórias Sutis entre os <li> */
        @apply divide-y divide-gray-100;
    }

    .profile-link {
        /* Você pode aplicar isso direto no <a> */
        /* 1. FAZ O LINK PREENCHER O <li> */
        @apply block w-full;

    }

    .profile-items {
        /* 1. Limpeza (Classes antigas removidas) */

        /* 2. Espaçamento Interno (Respiro) */
        @apply px-4 py-2;

        /* 3. Estilos de Texto */
        @apply text-sm text-gray-700;

        /* 4. Interatividade */
        @apply hover:bg-blue-100 cursor-pointer;

        /* 5. Transição Suave */
        @apply transition-colors duration-150 ease-in-out;

        /* 6. Cantos do Hover */
        @apply rounded-md;
    }

    .nav-bar-logo img {
        @apply w-full;
        /* Largura 100% para se ajustar ao container */
        height: auto;
        /* Mantém a proporção original da imagem */
    }

    .nav-bar>.navbar-items>form>button {
        @apply hover:border hover:shadow-md hover:scale-105 hover:cursor-pointer shadow-blue-400 border-blue-300 rounded-md p-1 transition-all duration-250 transform;
    }

    /*End Header - Navbar */

    /* 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 {
        @apply flex flex-col justify-center items-center w-full h-full mx-auto px-4 sm:px-6 lg:px-8;
    }

    .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;
    }

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