/* Custom CSS for VintageIQ Wine Market Intelligence Platform */

:root {
    --burgundy: #722F37;
    --burgundy-dark: #5A2329;
    --burgundy-light: #8B4049;
    --gold: #D4AF37;
    --gray-light: #F9FAFB;
}

/* Typography */
body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

/* Custom colors */
.text-burgundy {
    color: var(--burgundy);
}

.bg-burgundy {
    background-color: var(--burgundy);
}

.bg-burgundy-dark {
    background-color: var(--burgundy-dark);
}

.border-burgundy {
    border-color: var(--burgundy);
}

.hover\:text-burgundy-dark:hover {
    color: var(--burgundy-dark);
}

/* Navigation */
.nav-link {
    @apply text-gray-700 hover:text-burgundy transition-colors font-medium;
}

.nav-link.active {
    @apply text-burgundy border-b-2 border-burgundy pb-4;
}

/* Buttons */
.btn {
    @apply px-6 py-3 rounded-lg font-medium transition-all duration-200 inline-flex items-center justify-center;
}

.btn-burgundy {
    @apply bg-burgundy text-white hover:bg-burgundy-dark;
}

.btn-white {
    @apply bg-white text-burgundy hover:bg-gray-50;
}

.btn-outline-white {
    @apply bg-transparent text-white border-2 border-white hover:bg-white hover:text-burgundy;
}

.btn-gray {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300;
}

/* Form Elements */
.form-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-burgundy focus:border-transparent;
}

.form-select {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-burgundy focus:border-transparent bg-white;
}

/* Cards */
.stat-card {
    @apply bg-white p-6 rounded-lg border border-gray-200 hover:shadow-lg transition-shadow;
}

.brand-card {
    @apply bg-white p-5 rounded-lg border border-gray-200 hover:shadow-md transition-all cursor-pointer;
}

.brand-card:hover {
    transform: translateY(-2px);
}

.brand-card.premium {
    @apply border-gold;
    background: linear-gradient(135deg, #FFFEF5 0%, #FFF 100%);
}

/* Activity Feed */
.activity-item {
    @apply flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg transition-colors;
}

.activity-icon {
    @apply w-8 h-8 rounded-full flex items-center justify-center text-white text-sm;
}

.activity-icon.price {
    @apply bg-green-500;
}

.activity-icon.review {
    @apply bg-purple-500;
}

.activity-icon.news {
    @apply bg-blue-500;
}

.activity-icon.auction {
    @apply bg-orange-500;
}

/* Toggle Switch */
.switch {
    @apply relative inline-block w-12 h-6;
}

.switch input {
    @apply opacity-0 w-0 h-0;
}

.slider {
    @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 transition-all duration-300 rounded-full;
}

.slider:before {
    @apply absolute content-[''] h-4 w-4 left-1 bottom-1 bg-white transition-all duration-300 rounded-full;
}

input:checked + .slider {
    background-color: var(--burgundy);
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* Modal */
.modal {
    @apply fixed inset-0 z-50 flex items-center justify-center;
}

.modal-overlay {
    @apply absolute inset-0 bg-black bg-opacity-50;
}

.modal-content {
    @apply relative bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto;
}

.modal-header {
    @apply flex justify-between items-center p-6 border-b border-gray-200;
}

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

/* Gradient backgrounds */
.bg-gradient-to-r {
    background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
}

/* Wine brand badges */
.brand-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

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

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

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

.brand-badge.rhone {
    @apply bg-orange-100 text-orange-800;
}

/* Price indicators */
.price-up {
    @apply text-green-600;
}

.price-down {
    @apply text-red-600;
}

.price-stable {
    @apply text-gray-600;
}

/* Loading states */
.skeleton {
    @apply bg-gray-200 animate-pulse rounded;
}

/* Charts */
.chart-container {
    position: relative;
    height: 100%;
    width: 100%;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .modal-content {
        @apply max-w-full m-4;
    }
    
    .stat-card {
        @apply p-4;
    }
}

/* Wine rating stars */
.wine-rating {
    @apply inline-flex items-center;
}

.wine-rating .star {
    @apply text-yellow-400;
}

.wine-rating .star.empty {
    @apply text-gray-300;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

/* Animations */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-slideIn {
    animation: slideIn 0.3s ease-out;
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

/* Notification badges */
.notification-badge {
    @apply absolute -top-1 -right-1 h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-bold;
}

/* Table styles */
.data-table {
    @apply w-full border-collapse;
}

.data-table thead {
    @apply bg-gray-50 border-b-2 border-gray-200;
}

.data-table th {
    @apply px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.data-table td {
    @apply px-4 py-3 border-b border-gray-200;
}

.data-table tr:hover {
    @apply bg-gray-50;
}

/* Alert messages */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-success {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
}

.alert-error {
    @apply bg-red-100 text-red-800 border border-red-200;
}

.alert-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}