@tailwind base;
@tailwind components;
@tailwind utilities;

/* -----------------------------------------------
   Buttons
   ----------------------------------------------- */
@layer components {
    .btn-primary {
        @apply inline-flex items-center justify-center px-6 py-3
               bg-primary-600 text-white font-semibold rounded-lg
               shadow-sm transition-all duration-200
               hover:bg-primary-700 hover:shadow-md
               focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
               disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center px-6 py-3
               bg-white text-gray-700 font-semibold rounded-lg
               border border-gray-300 shadow-sm transition-all duration-200
               hover:bg-gray-50 hover:shadow-md hover:border-gray-400
               focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
               disabled:opacity-50 disabled:cursor-not-allowed;
    }
}

/* -----------------------------------------------
   Job Card
   ----------------------------------------------- */
@layer components {
    .job-card {
        @apply relative bg-white rounded-xl border border-gray-200
               shadow-sm p-6 transition-all duration-200
               hover:shadow-lg hover:border-primary-300 hover:-translate-y-0.5;
    }
}

/* -----------------------------------------------
   Favorite Button
   ----------------------------------------------- */
@layer components {
    .favorite-btn {
        @apply inline-flex items-center justify-center
               w-10 h-10 rounded-full transition-all duration-200
               text-gray-400 hover:text-red-500
               focus:outline-none focus:ring-2 focus:ring-red-300 focus:ring-offset-1;
    }

    .favorite-btn.is-favorited {
        @apply text-red-500;
    }

    .favorite-btn.is-favorited svg .heart-fill {
        @apply fill-current;
    }

    .favorite-btn.is-not-favorited svg .heart-fill {
        @apply fill-transparent;
    }
}

/* -----------------------------------------------
   Badges
   ----------------------------------------------- */
@layer components {
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5
               text-xs font-medium rounded-full;
    }

    .badge-employment {
        @apply bg-primary-100 text-primary-800;
    }

    .badge-remote {
        @apply bg-accent-100 text-accent-800;
    }

    .badge-location {
        @apply bg-gray-100 text-gray-700;
    }
}

/* -----------------------------------------------
   Form Inputs
   ----------------------------------------------- */
@layer components {
    .form-input {
        @apply block w-full rounded-lg border border-gray-300
               bg-white px-4 py-2.5 text-gray-900 placeholder-gray-400
               shadow-sm transition-colors duration-200
               focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-0
               focus:outline-none;
    }

    .form-select {
        @apply block w-full rounded-lg border border-gray-300
               bg-white px-4 py-2.5 text-gray-900
               shadow-sm transition-colors duration-200
               focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-0
               focus:outline-none appearance-none;
    }

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

/* -----------------------------------------------
   Flash Messages Animation
   ----------------------------------------------- */
@keyframes flash-fade-in {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flash-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-1rem);
    }
}

@layer components {
    .flash-message {
        animation: flash-fade-in 0.3s ease-out;
    }

    .flash-fade-out {
        animation: flash-fade-out 0.3s ease-in forwards;
    }
}