@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    @apply bg-gray-100 text-gray-800;
}

.container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
}

.card {
    @apply bg-white rounded-xl shadow-lg p-6 mb-6;
}

.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition duration-200 ease-in-out;
}

.btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-200 ease-in-out;
}

.input-field {
    @apply mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4;
}

.navbar {
    @apply bg-white shadow-sm;
}

.navbar-link {
    @apply text-gray-600 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition duration-200 ease-in-out;
}

.nav-active {
    @apply bg-blue-50 text-blue-600;
}

.table-auto {
    @apply w-full;
}

.table-auto th, .table-auto td {
    @apply px-4 py-2 text-left border-b border-gray-200;
}

.table-auto th {
    @apply bg-gray-50 text-gray-700 font-semibold uppercase text-sm;
}

.table-auto tbody tr:nth-child(even) {
    @apply bg-gray-50;
}

.badge {
    @apply px-2 py-1 rounded-full text-xs font-semibold;
}

.badge-pending {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-approved {
    @apply bg-green-100 text-green-800;
}

.badge-rejected {
    @apply bg-red-100 text-red-800;
}

/* Custom styles for the dashboard cards */
.metric-card {
    @apply flex items-center justify-between p-4 bg-white rounded-lg shadow-sm;
}

.metric-card-icon {
    @apply text-3xl;
}

.metric-card-value {
    @apply text-2xl font-bold;
}

.metric-card-label {
    @apply text-sm text-gray-500;
}

/* Plan card specific styles */
.plan-card {
    @apply bg-white rounded-xl shadow-lg p-6 flex flex-col items-center text-center;
}

.plan-title {
    @apply text-2xl font-semibold mb-2;
}

.plan-price {
    @apply text-4xl font-bold text-blue-600 mb-4;
}

.plan-description {
    @apply text-gray-600 mb-6;
}

/* Admin specific styles */
.admin-card-header {
    @apply text-lg font-semibold mb-4 border-b pb-2 border-gray-200;
}
