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

@layer theme {
    :root {
        --primary: #059669; /* Emerald Green for a Sri Lankan feel */
        --primary-dark: #047857;
        --secondary: #64748b;
        --bg-body: #f8fafc;
        --sidebar-width: 280px;
        --header-height: 70px;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
    }
}

@layer base {
    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: var(--bg-body);
        color: #0f172a;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
    }
}

@layer components {
    .animate-slide-in { animation: slideIn 0.3s ease-out forwards; }
    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    .animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .animate-scale-in { animation: scaleIn 0.2s ease-out forwards; }
    @keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .btn {
        @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed;
    }
    .btn-primary {
        @apply bg-[var(--primary)] text-white hover:bg-[var(--primary-dark)] focus:ring-[var(--primary)];
    }
    .btn-secondary {
        @apply bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-gray-200;
    }
    .btn-danger {
        @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
    }
    .card {
        @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
    }
    .input-field {
        @apply w-full px-4 py-2 rounded-lg border border-gray-300 focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)] focus:ring-opacity-20 outline-none transition-all;
    }
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    .sidebar-link {
        @apply flex items-center px-4 py-3 text-gray-400 rounded-lg transition-colors hover:text-white hover:bg-white/10 mx-2;
    }
    .sidebar-link.active {
        @apply bg-[var(--primary)] text-white shadow-lg shadow-emerald-900/20;
    }
}
