/* Columbia Nursery Custom Styles */

/* Import Tailwind base styles - for production, you'd compile this properly */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Custom color palette */
:root {
    /* Sage colors */
    --sage-50: #f6f7f6;
    --sage-100: #e3e5e3;
    --sage-200: #c7cbc7;
    --sage-300: #a3b5a3;
    --sage-400: #7f977f;
    --sage-500: #627862;
    --sage-600: #4e5f4e;
    --sage-700: #414d41;
    --sage-800: #363e36;
    --sage-900: #2f342f;
    
    /* Earth colors */
    --earth-50: #faf9f7;
    --earth-100: #f3f0e8;
    --earth-200: #e6dfd0;
    --earth-300: #d4c5aa;
    --earth-400: #bfa782;
    --earth-500: #ac8b61;
    --earth-600: #97734f;
    --earth-700: #7b5b41;
    --earth-800: #654b39;
    --earth-900: #544032;
    
    /* Leaf colors */
    --leaf-400: #84cc16;
    --leaf-500: #65a30d;
    --leaf-600: #4d7c0f;
}

/* Custom utility classes */
.bg-sage-50 { background-color: var(--sage-50); }
.bg-sage-100 { background-color: var(--sage-100); }
.bg-sage-200 { background-color: var(--sage-200); }
.bg-sage-300 { background-color: var(--sage-300); }
.bg-sage-400 { background-color: var(--sage-400); }
.bg-sage-500 { background-color: var(--sage-500); }
.bg-sage-600 { background-color: var(--sage-600); }
.bg-sage-700 { background-color: var(--sage-700); }
.bg-sage-800 { background-color: var(--sage-800); }
.bg-sage-900 { background-color: var(--sage-900); }

.text-sage-50 { color: var(--sage-50); }
.text-sage-100 { color: var(--sage-100); }
.text-sage-200 { color: var(--sage-200); }
.text-sage-300 { color: var(--sage-300); }
.text-sage-400 { color: var(--sage-400); }
.text-sage-500 { color: var(--sage-500); }
.text-sage-600 { color: var(--sage-600); }
.text-sage-700 { color: var(--sage-700); }
.text-sage-800 { color: var(--sage-800); }
.text-sage-900 { color: var(--sage-900); }

.border-sage-200 { border-color: var(--sage-200); }
.border-sage-300 { border-color: var(--sage-300); }
.border-sage-500 { border-color: var(--sage-500); }

.bg-earth-50 { background-color: var(--earth-50); }
.bg-earth-100 { background-color: var(--earth-100); }
.bg-earth-600 { background-color: var(--earth-600); }
.bg-earth-700 { background-color: var(--earth-700); }
.bg-earth-800 { background-color: var(--earth-800); }

.text-earth-500 { color: var(--earth-500); }
.text-earth-600 { color: var(--earth-600); }
.text-earth-700 { color: var(--earth-700); }
.text-earth-800 { color: var(--earth-800); }

.bg-leaf-500 { background-color: var(--leaf-500); }
.text-leaf-600 { color: var(--leaf-600); }

/* Form styles */
.form-input {
    @apply mt-1 block w-full rounded-md shadow-sm sm:text-sm;
    border-color: var(--sage-300);
}

.form-input:focus {
    border-color: var(--sage-500);
    ring-color: var(--sage-500);
}

.form-label {
    @apply block text-sm font-medium;
    color: var(--earth-700);
}

.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2;
    background-color: var(--sage-600);
}

.btn-primary:hover {
    background-color: var(--sage-700);
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-offset-2;
    border-color: var(--sage-300);
    color: var(--earth-700);
}

.btn-secondary:hover {
    background-color: var(--sage-50);
}

/* Hover states */
.hover\:bg-sage-50:hover { background-color: var(--sage-50); }
.hover\:bg-sage-700:hover { background-color: var(--sage-700); }
.hover\:text-sage-700:hover { color: var(--sage-700); }
.hover\:border-sage-500:hover { border-color: var(--sage-500); }

/* Focus states */
.focus\:border-sage-500:focus { border-color: var(--sage-500); }
.focus\:ring-sage-500:focus { --tw-ring-color: var(--sage-500); }

/* Custom garden theme additions */
.gradient-sage {
    background: linear-gradient(to right, var(--sage-600), var(--sage-700));
}

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

.badge-backorder {
    background-color: #fef3c7;
    color: #92400e;
}

.badge-original {
    background-color: var(--sage-100);
    color: var(--sage-800);
}

/* Autocomplete dropdown */
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--sage-300);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 50;
}

.autocomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.autocomplete-item:hover {
    background-color: #f6f7f6;
}

.autocomplete-item.selected {
    background-color: #e3e5e3;
}

/* Table styles */
.table-auto th {
    background-color: var(--sage-50);
    color: var(--earth-700);
}

.table-auto tr:hover {
    background-color: var(--sage-50);
}

/* Item row hover */
.item-row {
    transition: all 0.3s ease;
}

.item-row:hover {
    background-color: rgba(98, 120, 98, 0.05);
}

/* Sortable table headers */
th a {
    text-decoration: none;
    transition: color 0.2s;
}

th a:hover {
    text-decoration: underline;
}

th a span {
    font-size: 0.75rem;
    opacity: 0.7;
}