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

@layer components {

    /* ================= CARDS ================= */
    .enhanced-card {
        @apply bg-white rounded-xl shadow-sm border border-gray-200 transition-all duration-300;
    }

    /* Explicit Dark Mode Definition */
    .dark .enhanced-card {
        @apply bg-gray-800 border-gray-700;
    }

    .stats-card {
        @apply rounded-xl p-6 shadow-lg transition-transform duration-200 hover:-translate-y-1 text-white;
    }

    /* ================= BUTTONS ================= */
    .btn-base {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2 focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-primary {
        @apply btn-base bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500 shadow-md hover:shadow-lg;
    }

    .dark .btn-primary {
        @apply bg-blue-700 hover:bg-blue-600;
    }

    .btn-secondary {
        @apply btn-base bg-gray-100 text-gray-700 hover:bg-gray-200 border border-gray-300;
    }

    .dark .btn-secondary {
        @apply bg-gray-700 text-gray-200 border-gray-600 hover:bg-gray-600;
    }

    .btn-danger {
        @apply btn-base bg-red-600 hover:bg-red-700 text-white focus:ring-red-500 shadow-md;
    }

    .btn-success {
        @apply btn-base bg-green-600 hover:bg-green-700 text-white focus:ring-green-500 shadow-md;
    }

    .action-btn {
        @apply w-8 h-8 rounded-full flex items-center justify-center transition-colors duration-200 focus:outline-none;
    }

    /* ================= FORMS ================= */
    .enhanced-form-label {
        @apply block text-sm font-semibold text-gray-700 mb-1.5;
    }

    .dark .enhanced-form-label {
        @apply text-gray-300;
    }

    .enhanced-form-input {
        @apply w-full px-4 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-900 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all disabled:bg-gray-100 disabled:text-gray-500;
    }

    .dark .enhanced-form-input {
        @apply bg-gray-700 border-gray-600 text-white focus:ring-blue-400;
    }

    /* ================= TABLES ================= */
    .enhanced-table {
        @apply w-full text-left border-collapse;
    }

        .enhanced-table thead tr {
            @apply bg-gray-50 text-gray-600 uppercase text-xs font-bold tracking-wider border-b border-gray-200;
        }

    .dark .enhanced-table thead tr {
        @apply bg-gray-700 text-gray-300 border-gray-600;
    }

    .enhanced-table th {
        @apply py-3 px-6;
    }

    .enhanced-table tbody tr {
        @apply border-b border-gray-100 hover:bg-gray-50 transition-colors;
    }

    .dark .enhanced-table tbody tr {
        @apply border-gray-700 hover:bg-gray-700/50 text-gray-200;
    }

    .enhanced-table td {
        @apply py-3 px-6;
    }

    /* ================= BADGES ================= */
    .status-badge {
        @apply px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide border;
    }

    /* Status Colors */
    .status-available {
        @apply bg-green-100 text-green-800 border-green-200;
    }

    .dark .status-available {
        @apply bg-green-900/30 text-green-300 border-green-800;
    }

    .status-reserved {
        @apply bg-yellow-100 text-yellow-800 border-yellow-200;
    }

    .dark .status-reserved {
        @apply bg-yellow-900/30 text-yellow-300 border-yellow-800;
    }

    .status-sold {
        @apply bg-red-100 text-red-800 border-red-200;
    }

    .dark .status-sold {
        @apply bg-red-900/30 text-red-300 border-red-800;
    }

    .status-default {
        @apply bg-gray-100 text-gray-800 border-gray-200;
    }

    .dark .status-default {
        @apply bg-gray-700 text-gray-300 border-gray-600;
    }

    /* ================= TEXT UTILS ================= */
    .page-title {
        @apply text-3xl font-bold text-gray-800;
    }

    .dark .page-title {
        @apply text-white;
    }

    .page-subtitle {
        @apply text-gray-600 mt-1;
    }

    .dark .page-subtitle {
        @apply text-gray-400;
    }
}