/* Custom Colors */
:root {
    --color-sage-50: #f8faf9;
    --color-sage-100: #f1f5f3;
    --color-sage-200: #e1e9e5;
    --color-sage-300: #c7d5ce;
    --color-sage-400: #a3b8ae;
    --color-sage-500: #85998e;
    --color-sage-600: #5f7267;
    --color-sage-700: #4a574f;
    --color-sage-800: #3c463f;
    --color-sage-900: #313935;
    
    --color-warm-50: #fafaf9;
    --color-warm-100: #f5f5f4;
    --color-warm-200: #e7e5e4;
    --color-warm-300: #d6d3d1;
    --color-warm-400: #a8a29e;
    --color-warm-500: #78716c;
    --color-warm-600: #57534e;
    --color-warm-700: #44403c;
    --color-warm-800: #292524;
    --color-warm-900: #1c1917;
}

/* Navigation */
.nav-link {
    @apply inline-flex items-center px-1 pt-1 text-sm font-medium text-warm-500 hover:text-warm-700 hover:border-warm-300;
}

.nav-link.active {
    @apply border-sage-500 text-warm-900 border-b-2;
}

/* Animations */
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Form Elements */
.form-input {
    @apply mt-1 block w-full border-warm-300 rounded-md shadow-sm focus:ring-sage-500 focus:border-sage-500 sm:text-sm;
}

.form-select {
    @apply mt-1 block w-full pl-3 pr-10 py-2 text-base border-warm-300 focus:outline-none focus:ring-sage-500 focus:border-sage-500 sm:text-sm rounded-md;
}

.form-checkbox {
    @apply h-4 w-4 text-sage-600 focus:ring-sage-500 border-warm-300 rounded;
}

.form-radio {
    @apply h-4 w-4 text-sage-600 focus:ring-sage-500 border-warm-300;
}

/* Buttons */
.btn {
    @apply inline-flex justify-center py-2 px-4 border shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply btn border-transparent text-white bg-sage-600 hover:bg-sage-700 focus:ring-sage-500;
}

.btn-secondary {
    @apply btn border-warm-300 text-warm-700 bg-white hover:bg-warm-50 focus:ring-sage-500;
}

/* Cards */
.card {
    @apply bg-white shadow rounded-lg;
}

.card-header {
    @apply px-4 py-5 border-b border-warm-200 sm:px-6;
}

.card-body {
    @apply px-4 py-5 sm:p-6;
}

.card-footer {
    @apply px-4 py-3 bg-warm-50 text-right sm:px-6;
}

/* Tables */
.table-container {
    @apply shadow overflow-hidden border-b border-warm-200 sm:rounded-lg;
}

.table {
    @apply min-w-full divide-y divide-warm-200;
}

.table th {
    @apply px-6 py-3 bg-warm-50 text-left text-xs font-medium text-warm-500 uppercase tracking-wider;
}

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-warm-900;
}

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

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

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

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

/* Alerts */
.alert {
    @apply rounded-md p-4 mb-4;
}

.alert-success {
    @apply alert bg-sage-50 text-sage-700;
}

.alert-error {
    @apply alert bg-red-50 text-red-700;
}

.alert-warning {
    @apply alert bg-yellow-50 text-yellow-700;
}

/* Modal */
.modal {
    @apply fixed inset-0 bg-warm-500 bg-opacity-75;
}

.modal-content {
    @apply relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6;
}

/* Loading States */
.loading {
    @apply animate-pulse bg-warm-100;
}

/* Utilities */
.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Stats Card */
.stats-card {
    @apply px-4 py-5 bg-white shadow rounded-lg overflow-hidden sm:p-6;
}

.stats-label {
    @apply text-sm font-medium text-gray-500 truncate;
}

.stats-value {
    @apply mt-1 text-3xl font-semibold text-gray-900;
}