/* Data Visualization Enhancements */

/* Enhanced Table Styling */
.enhanced-data-table {
    @apply w-full bg-base-100 rounded-lg shadow-lg overflow-hidden;
}

.enhanced-data-table thead {
    @apply bg-primary text-primary-content;
}

.enhanced-data-table th {
    @apply px-6 py-4 text-left font-semibold text-sm uppercase tracking-wider;
}

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

.enhanced-data-table tbody tr {
    @apply border-b border-base-200 hover:bg-base-50 transition-colors duration-200;
}

.enhanced-data-table tbody tr:last-child {
    @apply border-b-0;
}

/* Visual Indicators */
.price-indicator {
    @apply flex items-center space-x-2;
}

.price-bar {
    @apply h-2 bg-gradient-to-r from-success to-warning rounded-full;
    transition: width 0.3s ease-in-out;
}

.population-indicator {
    @apply flex items-center space-x-2;
}

.population-dots {
    @apply flex space-x-1;
}

.population-dot {
    @apply w-2 h-2 bg-info rounded-full;
}

.commute-indicator {
    @apply flex items-center space-x-2;
}

.commute-icon {
    @apply text-warning;
}

.trend-indicator {
    @apply inline-flex items-center space-x-1;
}

.trend-arrow {
    @apply text-lg;
}

.trend-up {
    @apply text-success;
}

.trend-down {
    @apply text-error;
}

.trend-stable {
    @apply text-info;
}

/* Comparison Bars */
.comparison-container {
    @apply relative w-full h-6 bg-base-200 rounded-full overflow-hidden;
}

.comparison-bar {
    @apply h-full rounded-full transition-all duration-500 ease-out;
}

.comparison-bar.price {
    @apply bg-gradient-to-r from-primary to-secondary;
}

.comparison-bar.rent {
    @apply bg-gradient-to-r from-accent to-info;
}

.comparison-bar.utilities {
    @apply bg-gradient-to-r from-warning to-error;
}

.comparison-bar.groceries {
    @apply bg-gradient-to-r from-success to-primary;
}

/* Enhanced Cards */
.data-card {
    @apply bg-base-100 rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow duration-300;
}

.data-card-header {
    @apply flex items-center justify-between mb-4;
}

.data-card-title {
    @apply text-xl font-bold text-primary;
}

.data-card-subtitle {
    @apply text-sm text-base-content/70;
}

/* Statistics Display */
.stat-item {
    @apply flex flex-col items-center p-4 bg-base-100 rounded-lg shadow-md;
}

.stat-value {
    @apply text-2xl font-bold text-primary mb-1;
}

.stat-label {
    @apply text-sm text-base-content/70 text-center;
}

.stat-change {
    @apply text-xs font-medium;
}

.stat-change.positive {
    @apply text-success;
}

.stat-change.negative {
    @apply text-error;
}

.stat-change.neutral {
    @apply text-info;
}

/* Interactive Elements */
.sortable-header {
    @apply cursor-pointer hover:bg-primary-focus transition-colors duration-200;
}

.sortable-header:hover {
    @apply text-primary-content;
}

.sort-icon {
    @apply ml-2 text-xs opacity-50;
}

.sort-icon.active {
    @apply opacity-100;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .enhanced-data-table {
        @apply text-xs;
    }
    
    .enhanced-data-table th,
    .enhanced-data-table td {
        @apply px-3 py-2;
    }
    
    .comparison-container {
        @apply h-4;
    }
    
    .stat-value {
        @apply text-lg;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.slide-up {
    animation: slideUp 0.6s ease-out;
}

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tooltip Styling */
.tooltip-container {
    @apply relative inline-block;
}

.tooltip-content {
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-base-content text-base-100 text-xs rounded-lg opacity-0 pointer-events-none transition-opacity duration-300;
}

.tooltip-container:hover .tooltip-content {
    @apply opacity-100;
}

/* Legend Styling */
.data-legend {
    @apply flex flex-wrap gap-4 justify-center mt-4 p-4 bg-base-200 rounded-lg;
}

.legend-item {
    @apply flex items-center space-x-2;
}

.legend-color {
    @apply w-4 h-4 rounded-full;
}

.legend-label {
    @apply text-sm font-medium;
}