@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 bg-fixed;
        @apply overflow-y-auto overflow-x-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;
        @apply bg-transparent text-black;
        @apply fixed z-50 w-full;

        /* 1. ADICIONADO: A borda agora mora aqui */
        @apply border-b;

        /* 2. ESTADO BASE (Topo): A borda começa transparente */
        @apply border-transparent;

        /* 3. ADICIONADO: Também transiciona a cor da borda */
        @apply transition-colors duration-700 ease-in-out;
    }

    .nav-bar::before {
        content: '';
        @apply absolute top-0 left-0 w-full h-full;

        /* 2. ESTADO BASE (Topo): Fundo e Sombra */
        @apply bg-white;
        @apply shadow-md shadow-blue-400;
        /* 4. REMOVIDO: As classes 'border-b border-white' saíram daqui */

        /* 3. TRANSIÇÃO (Correto) */
        @apply transition-all duration-700 ease-in-out;

        @apply -z-10;
    }


    .navbar-scrolled {
        @apply border-white shadow-md;
    }

    .navbar-scrolled::before {
        @apply opacity-0;
        @apply shadow-none;
    }

    .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;
        @apply rounded-xl;
        @apply max-w-7 max-h-7;
    }

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

        @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 {
        /* Deixe APENAS as classes de largura, margem e padding */
        @apply w-full mx-auto px-4 sm:px-6 lg:px-8 mt-10 mb-10;
    }

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

    /* Estilos para o card do cliente */
    /* CONTAINER PRINCIPAL DO CARD */
    .client-card {
        /* Layout: Flex-col (vertical) */
        @apply flex flex-col justify-between;
        @apply hover:transition duration-150 ease-in-out hover:scale-120;

        /* Estilo: Sombra, borda, fundo branco */
        @apply bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out;
        @apply border border-gray-100;

        /* Garante que o conteúdo não vaze */
        @apply overflow-hidden;
    }

    /* O "RETÂNGULO" SUPERIOR (Avatar + Opções) */
    .client-card-header {
        /* 1. POSIÇÃO: 'relative' para ancorar o menu de opções */
        @apply relative;

        /* 2. LAYOUT: Centraliza o avatar */
        @apply flex justify-center items-center;

        /* 3. ESPAÇAMENTO: Padding interno */
        @apply p-6;

        /* 4. (Opcional) Fundo sutil para o retângulo */
        @apply bg-gray-50;
    }

    /* AVATAR DO CLIENTE */
    .client-avatar {
        /* A imagem <img> interna já tem as classes de tamanho (w-32 h-32) */
    }

    /* MENU DE OPÇÕES (Três Pontinhos) */
    .client-options-menu {
        /* 1. POSIÇÃO: Flutua sobre o header */
        @apply absolute top-4 right-4;
    }

    .client-options-button {
        @apply p-2 rounded-full hover:bg-gray-200 transition-colors;
        @apply focus:outline-none focus:ring-2 focus:ring-blue-500;
    }

    /* LISTA DE OPÇÕES (Dropdown) */
    .client-options-list {
        @apply absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg py-1 z-10;
        @apply divide-y divide-gray-100;
    }

    .client-option-item {
        @apply block px-4 py-2 text-sm text-gray-700 hover:bg-blue-100 hover:text-blue-800 transition-colors;
        @apply cursor-pointer;
    }


    /* NOME DO CLIENTE (Área inferior) */
    .client-card-name {
        @apply text-lg font-semibold text-gray-800 text-center;

        /* Espaçamento e uma borda sutil no topo */
        @apply p-4 border-t border-gray-100;
    }
}