/* AI Trader Terminal - Tailwind CSS Configuration */
/* postcss-import */
/* tailwindcss */
/* autoprefixer */

/* ===== TAILWIND CSS CUSTOM UTILITIES ===== */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== CUSTOM COMPONENT CLASSES ===== */
@layer components {
  /* Terminal Scrollbar */
  .terminal-scrollbar {
    @apply scrollbar-thin scrollbar-track-gray-800 scrollbar-thumb-gray-600 hover:scrollbar-thumb-gray-500;
  }
  
  /* Glow Effects */
  .glow-green {
    @apply shadow-lg shadow-green-500/30;
  }
  
  .glow-red {
    @apply shadow-lg shadow-red-500/30;
  }
  
  .glow-blue {
    @apply shadow-lg shadow-blue-500/30;
  }
  
  /* Terminal Font */
  .font-terminal {
    @apply font-mono tabular-nums;
  }
  
  /* Trading Button */
  .trading-button {
    @apply relative overflow-hidden transition-all duration-200 ease-in-out
           hover:-translate-y-0.5 active:translate-y-0;
  }
  
  /* Price Change Animations */
  .price-up {
    @apply text-green-500 animate-pulse;
  }
  
  .price-down {
    @apply text-red-500 animate-pulse;
  }
  
  /* Order Depth Visualization */
  .order-depth {
    @apply relative overflow-hidden;
  }
  
  .order-depth::before {
    @apply absolute inset-y-0 right-0 bg-gradient-to-l from-green-500/10 to-transparent z-0;
    content: '';
  }
  
  .order-depth.ask::before {
    @apply bg-gradient-to-l from-red-500/10 to-transparent;
  }
  
  .order-depth > * {
    @apply relative z-10;
  }
  
  /* Chart Container */
  .chart-container {
    @apply bg-gradient-to-br from-gray-900 to-gray-800 border border-gray-700 rounded-lg;
  }
  
  /* Status Indicators */
  .status-indicator {
    @apply relative;
  }
  
  .status-indicator::before {
    @apply absolute -left-3 top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-current;
    content: '';
  }
  
  .status-online::before {
    @apply bg-green-500 animate-pulse;
  }
  
  .status-offline::before {
    @apply bg-red-500;
  }
  
  /* Trading Panel */
  .trading-panel {
    @apply shadow-lg shadow-black/10 border border-white/5;
  }
  
  /* Trading Grid */
  .trading-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4;
  }
  
  /* Market Ticker */
  .market-ticker {
    @apply bg-gradient-to-r from-gray-800 via-gray-900 to-gray-800 bg-[length:200%_100%] animate-pulse;
  }
  
  /* Loading Skeleton */
  .loading-skeleton {
    @apply bg-gradient-to-r from-gray-700 via-gray-600 to-gray-700 bg-[length:200%_100%] animate-pulse;
  }
  
  /* Terminal Border */
  .terminal-border {
    @apply border border-gray-600 rounded bg-gradient-to-br from-gray-900 to-gray-800;
  }
  
  /* Interactive Hover */
  .interactive-hover {
    @apply hover:bg-blue-500/10 hover:border-blue-500 transition-all duration-200;
  }
  
  /* State Indicators */
  .state-success {
    @apply border-l-4 border-green-500 bg-green-500/5;
  }
  
  .state-error {
    @apply border-l-4 border-red-500 bg-red-500/5;
  }
  
  .state-warning {
    @apply border-l-4 border-yellow-500 bg-yellow-500/5;
  }
  
  /* Status Badges */
  .status-active {
    @apply inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs font-medium
           bg-green-500/10 text-green-500 border border-green-500/30;
  }
  
  .status-warning {
    @apply inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs font-medium
           bg-yellow-500/10 text-yellow-500 border border-yellow-500/30;
  }
  
  .status-error {
    @apply inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs font-medium
           bg-red-500/10 text-red-500 border border-red-500/30;
  }
  
  /* Enhanced Button with Shine Effect */
  .btn-shine {
    @apply relative overflow-hidden;
  }
  
  .btn-shine::before {
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent
           -translate-x-full transition-transform duration-500;
    content: '';
  }
  
  .btn-shine:hover::before {
    @apply translate-x-full;
  }
  
  /* Progress Bar */
  .progress-bar {
    @apply w-full h-1 bg-gray-700 rounded-sm overflow-hidden;
  }
  
  .progress-fill {
    @apply h-full bg-gradient-to-r from-blue-500 to-blue-700 transition-all duration-300;
  }
  
  /* Range Slider */
  .slider {
    @apply appearance-none bg-transparent cursor-pointer;
  }
  
  .slider::-webkit-slider-track {
    @apply bg-gray-600 h-2 rounded;
  }
  
  .slider::-webkit-slider-thumb {
    @apply appearance-none bg-blue-500 h-4 w-4 rounded-full border-2 border-blue-800
           shadow-lg shadow-blue-500/50 transition-all duration-200
           hover:bg-blue-600 hover:shadow-blue-500/80 hover:scale-110;
  }
  
  .slider::-moz-range-track {
    @apply bg-gray-600 h-2 rounded border-0;
  }
  
  .slider::-moz-range-thumb {
    @apply bg-blue-500 h-4 w-4 rounded-full border-2 border-blue-800
           shadow-lg shadow-blue-500/50 cursor-pointer transition-all duration-200
           hover:bg-blue-600 hover:shadow-blue-500/80 hover:scale-110;
  }
  
  /* Enhanced Input Focus */
  .input-focus {
    @apply focus:outline-none focus:border-blue-500 focus:shadow-lg focus:shadow-blue-500/10 focus:bg-blue-500/5;
  }
  
  /* Tooltip */
  .tooltip {
    @apply relative;
  }
  
  .tooltip:hover::after {
    @apply absolute bottom-full left-1/2 -translate-x-1/2 bg-gray-800 text-white
           px-2 py-1 rounded text-xs whitespace-nowrap z-50 border border-gray-700
           shadow-lg;
    content: attr(data-tooltip);
  }
}

/* ===== CUSTOM ANIMATIONS ===== */
@layer utilities {
  /* Pulse Animations */
  .pulse-green {
    animation: pulse-green 2s infinite;
  }
  
  .pulse-red {
    animation: pulse-red 2s infinite;
  }
  
  /* Flash Animations */
  .flash-green {
    animation: flash-green 0.5s ease-out;
  }
  
  .flash-red {
    animation: flash-red 0.5s ease-out;
  }
  
  /* Ticker Flow */
  .ticker-flow {
    animation: ticker-flow 10s linear infinite;
  }
  
  /* Loading Shimmer */
  .loading-shimmer {
    animation: loading-shimmer 1.5s infinite;
  }
  
  /* Mobile Hidden */
  .mobile-hidden {
    @apply hidden md:block;
  }
  
  /* Mobile Button */
  .mobile-btn {
    @apply min-h-11 min-w-11 touch-manipulation;
  }
}

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes flash-green {
  0% { background-color: rgba(16, 185, 129, 0.3); }
  100% { background-color: transparent; }
}

@keyframes flash-red {
  0% { background-color: rgba(239, 68, 68, 0.3); }
  100% { background-color: transparent; }
}

@keyframes ticker-flow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== RESPONSIVE DESIGN ===== */
@layer base {
  /* Mobile Optimizations */
  @media (max-width: 768px) {
    .trading-grid {
      @apply grid-cols-1;
    }
    
    .font-terminal {
      @apply text-xs;
    }
    
    .trading-button {
      @apply px-4 py-2 text-sm;
    }
    
    .grid-cols-1.lg\\:grid-cols-3 {
      @apply grid-cols-1 gap-4;
    }
    
    .grid-cols-2.lg\\:grid-cols-4 {
      @apply grid-cols-2 gap-3;
    }
    
    .top-nav {
      @apply p-2 flex-wrap;
    }
    
    .top-nav .flex {
      @apply flex-wrap gap-2;
    }
    
    .left-sidebar {
      @apply w-full relative h-auto border-r-0 border-b border-gray-700;
    }
    
    .main-content {
      @apply ml-0 p-4;
    }
    
    .bg-gray-900.border.border-gray-600.rounded-lg {
      @apply p-3 mb-3;
    }
    
    .order-book-container {
      @apply max-h-48 text-xs;
    }
    
    .chart-container {
      @apply h-64 mb-4;
    }
    
    .trading-controls input,
    .trading-controls select {
      @apply text-sm p-2;
    }
    
    .performance-metric {
      @apply p-2 text-center;
    }
    
    .ai-signal-item {
      @apply p-2 text-xs;
    }
  }
  
  /* Tablet Optimizations */
  @media (min-width: 769px) and (max-width: 1024px) {
    .grid-cols-1.lg\\:grid-cols-3 {
      @apply grid-cols-2;
    }
    
    .chart-container {
      @apply h-80;
    }
    
    .font-terminal {
      @apply text-sm;
    }
  }
  
  /* Large Desktop Optimizations */
  @media (min-width: 1440px) {
    .chart-container {
      @apply h-96;
    }
    
    .trading-grid {
      @apply grid-cols-4;
    }
  }
  
  /* Touch Device Optimizations */
  @media (hover: none) and (pointer: coarse) {
    .trading-button:hover {
      @apply transform-none shadow-none;
    }
    
    .trading-button:active {
      @apply scale-98 bg-blue-500/80;
    }
    
    button, .btn, input[type="button"], input[type="submit"] {
      @apply min-h-11 min-w-11;
    }
    
    .hover\\:border-gray-500:hover {
      @apply border-current;
    }
    
    .hover\\:text-white:hover {
      @apply text-current;
    }
  }
  
  /* High Contrast Mode */
  @media (prefers-contrast: high) {
    .bg-gray-800 {
      @apply bg-black;
    }
    
    .bg-gray-900 {
      @apply bg-gray-900;
    }
    
    .text-gray-300 {
      @apply text-white;
    }
    
    .border-gray-600 {
      @apply border-white;
    }
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .ai-trader-terminal {
    @apply bg-white text-black;
  }
  
  .ai-trader-terminal .bg-gray-900,
  .ai-trader-terminal .bg-gray-800,
  .ai-trader-terminal .bg-gray-700 {
    @apply bg-white border border-gray-300;
  }
}