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

@layer base {
    body {
        @apply bg-gray-50 text-gray-900 antialiased dark:bg-gray-950 dark:text-gray-100;
    }
}

@layer components {
    .glass {
        @apply bg-white/80 backdrop-blur-lg border border-white/20 shadow-lg dark:bg-gray-800/80 dark:border-gray-700/20;
    }
    .card {
        @apply bg-white rounded-2xl shadow-sm border border-gray-100 p-4 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-100;
    }
    .btn-primary {
        @apply bg-teal-600 hover:bg-teal-700 text-white font-medium rounded-xl px-6 py-2.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-secondary {
        @apply bg-teal-50 hover:bg-teal-100 text-teal-700 font-medium rounded-xl px-6 py-2.5 transition-all duration-200 dark:bg-teal-900/30 dark:hover:bg-teal-900/50 dark:text-teal-300;
    }
    .btn-danger {
        @apply bg-expense hover:bg-red-600 text-white font-medium rounded-xl px-6 py-2.5 transition-all duration-200;
    }
    .btn-ghost {
        @apply bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-xl px-4 py-2 transition-all duration-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200;
    }
    .input-field {
        @apply w-full rounded-xl border border-gray-200 px-4 py-2.5 text-gray-900 placeholder-gray-400 focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition-all duration-200 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400;
    }
    .table-header {
        @apply text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider text-left px-4 py-3;
    }
    .table-cell {
        @apply px-4 py-3 text-sm text-gray-700 dark:text-gray-200;
    }
}

@layer utilities {
    @keyframes dockDot {
        0% { transform: scale(0); opacity: 0; }
        50% { transform: scale(1.3); }
        100% { transform: scale(1); opacity: 1; }
    }
    @keyframes slideUp {
        0% { transform: translateY(20px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }
    @keyframes slideDown {
        0% { transform: translateY(-20px); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }
}
