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

@layer base {
    [x-cloak] { display: none !important; }
}

@layer components {
    .btn-primary {
        @apply inline-flex items-center justify-center px-4 py-2 bg-primary-600 border border-transparent rounded-md font-semibold text-sm text-white hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition ease-in-out duration-150;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-sm text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition ease-in-out duration-150;
    }

    .btn-danger {
        @apply inline-flex items-center justify-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-sm text-white hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150;
    }

    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }

    .btn-success {
        @apply inline-flex items-center justify-center px-4 py-2 bg-emerald-600 border border-transparent rounded-md font-semibold text-sm text-white hover:bg-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 transition ease-in-out duration-150;
    }

    .btn-warning {
        @apply inline-flex items-center justify-center px-4 py-2 bg-amber-500 border border-transparent rounded-md font-semibold text-sm text-white hover:bg-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 transition ease-in-out duration-150;
    }

    .btn-info {
        @apply inline-flex items-center justify-center px-4 py-2 bg-cyan-600 border border-transparent rounded-md font-semibold text-sm text-white hover:bg-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 transition ease-in-out duration-150;
    }

    .form-input-custom {
        @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm;
    }

    .card {
        @apply bg-white rounded-lg shadow-sm border border-gray-100;
    }

    .card-header {
        @apply px-6 py-4 border-b border-gray-100 font-semibold text-gray-800;
    }

    .card-body {
        @apply px-6 py-5;
    }

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

    .badge-success {
        @apply bg-emerald-100 text-emerald-800;
    }

    .badge-danger {
        @apply bg-red-100 text-red-800;
    }

    .badge-warning {
        @apply bg-amber-100 text-amber-800;
    }

    .badge-info {
        @apply bg-cyan-100 text-cyan-800;
    }

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

    .icon-circle {
        @apply w-10 h-10 rounded-full flex items-center justify-center;
    }
}