/* Economy Analytics Styles - Shared between Virtual Currency and Inventory Items */

/* Base Analytics Table Styles */
.analytics-table {
  @apply rounded-xl shadow-sm overflow-hidden;
}

.analytics-table tbody tr {
  @apply transition-all duration-150 ease-in-out;
}

.analytics-table tbody tr:hover {
  @apply bg-gray-50 dark:bg-gray-700 shadow-md;
  transform: scale(1.01);
}

/* Currency-specific table header gradient */
.currency-analytics-table thead {
  background: linear-gradient(to right, #6366f1, #a855f7);
  @apply sticky top-0 z-10;
}

/* Inventory-specific table header gradient */
.inventory-analytics-table thead {
  background: linear-gradient(to right, #8b5cf6, #ec4899);
  @apply sticky top-0 z-10;
}

/* Balance/Inventory Badges */
.balance-badge,
.inventory-badge {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium transition-colors;
}

/* Currency badges - Green/Yellow theme */
.balance-badge.high {
  @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
}

.balance-badge.medium {
  @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
  box-shadow: 0 2px 4px rgba(234, 179, 8, 0.2);
}

.balance-badge.low {
  @apply bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200;
  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}

/* Inventory badges - Purple/Indigo theme */
.inventory-badge.high {
  @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200;
  box-shadow: 0 2px 4px rgba(168, 85, 247, 0.2);
}

.inventory-badge.medium {
  @apply bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.inventory-badge.low {
  @apply bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200;
  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2);
}

/* Shared Trend Indicators */
.trend-indicator {
  @apply inline-flex items-center text-sm font-medium transition-all;
}

.trend-indicator.up {
  @apply text-green-600 dark:text-green-400;
}

.trend-indicator.up svg {
  animation: bounce-up 1s ease-in-out infinite;
}

.trend-indicator.down {
  @apply text-red-600 dark:text-red-400;
}

.trend-indicator.down svg {
  animation: bounce-down 1s ease-in-out infinite;
}

.trend-indicator.stable {
  @apply text-gray-500 dark:text-gray-400;
}

/* Sparkline Styles */
.sparkline-cell {
  @apply px-2 py-1;
}

.sparkline-canvas {
  @apply w-full h-8;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Summary Cards */
.cms-content-container.bg-gradient-to-br {
  @apply transform transition-all duration-200 hover:scale-105 hover:shadow-lg;
}

/* Search and Filter Inputs */
.cms-form-input:focus,
.cms-form-select:focus {
  @apply ring-2 ring-indigo-500 border-indigo-500;
}

/* Pagination Buttons */
.cms-button-secondary:hover {
  @apply transform scale-105 shadow-md;
}

.cms-button-primary {
  @apply bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 transform transition-all duration-200 hover:scale-105;
}

/* Loading State */
.analytics-loading {
  @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
}

/* Player Avatar */
.player-avatar {
  @apply ring-2 ring-white dark:ring-gray-800 shadow-sm;
}

/* Actions Dropdown */
.actions-dropdown {
  @apply absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg z-10;
}

/* Empty State */
.empty-state {
  @apply text-center py-12;
}

.empty-state svg {
  @apply mx-auto h-12 w-12 text-gray-400 mb-4;
}

/* Distribution Chart Placeholder */
.distribution-chart {
  @apply bg-gray-100 dark:bg-gray-800 rounded-lg p-4;
  min-height: 200px;
}

/* Animations */
@keyframes bounce-up {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes bounce-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
}

/* Responsive Table */
@media (max-width: 768px) {
  .analytics-table,
  .currency-analytics-table,
  .inventory-analytics-table {
    font-size: 0.875rem;
  }
  
  .analytics-table th,
  .analytics-table td,
  .currency-analytics-table th,
  .currency-analytics-table td,
  .inventory-analytics-table th,
  .inventory-analytics-table td {
    @apply px-3 py-2;
  }
  
  .sparkline-canvas {
    width: 100px;
    height: 25px;
  }
}