/* Custom CSS for enhanced UI */

/* Base Styles */
:root {
  --primary: #356736;
  --primary-hover: #2a5329;
  --primary-light: #E3FEE3;
  --primary-light-hover: #F6FDF6;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
}

/* Form Enhancements */
.form-input,
.form-select,
.form-textarea {
  @apply block w-full px-4 py-3 rounded-xl border-2 border-gray-200;
  @apply focus:border-[var(--primary)] focus:ring focus:ring-[var(--primary)] focus:ring-opacity-50;
  @apply transition-colors duration-200 text-gray-900 text-base;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-error {
  @apply mt-1 text-sm text-red-600;
}

.form-help {
  @apply mt-1 text-sm text-gray-500;
}

/* Button Styles */
.btn {
  @apply inline-flex items-center px-4 py-2 border rounded-md shadow-sm text-sm font-medium;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150 ease-in-out;
}

.btn-primary {
  @apply btn border-transparent text-white bg-[var(--primary)] hover:bg-[var(--primary-hover)];
  @apply focus:ring-[var(--primary)];
}

.btn-secondary {
  @apply btn border-gray-300 text-gray-700 bg-white hover:bg-gray-50;
  @apply focus:ring-[var(--primary)];
}

/* Card Styles */
.card {
  @apply bg-white shadow-md rounded-lg overflow-hidden;
}

.card-header {
  @apply bg-[var(--primary-light)]/30 px-6 py-4 border-b border-gray-200;
}

.card-title {
  @apply text-xl font-semibold text-gray-800;
}

.card-body {
  @apply p-6;
}

/* Table Styles */
.table-container {
  @apply overflow-x-auto;
}

.table {
  @apply min-w-full text-sm rounded-lg overflow-hidden;
}

.table thead {
  @apply bg-[var(--primary-light)] text-gray-500 text-xs;
}

.table th {
  @apply px-3 py-2 text-left font-medium;
}

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

.table tbody tr {
  @apply hover:bg-[var(--primary-light)] transition;
}

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

.badge-primary {
  @apply bg-[var(--primary-light)] text-[var(--primary)];
}

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

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

/* Navigation Enhancements */
.nav-link {
  @apply flex items-center text-gray-700 hover:bg-[var(--primary-light)] hover:text-[var(--primary)];
  @apply px-4 py-3 rounded-lg transition-colors duration-200;
}

.nav-link.active {
  @apply bg-[var(--primary-light)] text-[var(--primary)] font-medium;
}

/* Tab Navigation */
.tab-nav {
  @apply flex space-x-6 border-b border-gray-200;
}

.tab-link {
  @apply py-2 font-medium text-gray-500 hover:text-[var(--primary)] border-b-2 border-transparent;
  @apply transition-colors duration-200;
}

.tab-link.active {
  @apply text-[var(--primary)] border-[var(--primary)];
}

/* Utility Classes */
.text-primary {
  @apply text-[var(--primary)];
}

.bg-primary {
  @apply bg-[var(--primary)];
}

.bg-primary-light {
  @apply bg-[var(--primary-light)];
}

.hover-primary {
  @apply hover:text-[var(--primary)] hover:bg-[var(--primary-light)];
}