/* AI Performance Dashboard - Tailwind CSS Configuration */
/* postcss-import */
/* tailwindcss */
/* autoprefixer */

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

/* ===== CUSTOM COMPONENT CLASSES ===== */
@layer components {
  /* Loading Spinner */
  .loading-spinner {
    @apply fixed inset-0 bg-white/80 hidden justify-center items-center z-50;
  }
  
  /* Enhanced Cards */
  .card-enhanced {
    @apply border-0 rounded-xl shadow-lg transition-all duration-200 ease-in-out
           hover:-translate-y-0.5 hover:shadow-xl bg-white;
  }
  
  /* Card Headers */
  .card-header-enhanced {
    @apply bg-white border-b border-gray-200 rounded-t-xl px-6 py-4;
  }
  
  /* Card Body */
  .card-body-enhanced {
    @apply p-6;
  }
  
  /* Gradient Cards */
  .card-primary {
    @apply bg-gradient-to-br from-blue-500 to-blue-700 border-0 text-white;
  }
  
  .card-success {
    @apply bg-gradient-to-br from-green-500 to-green-700 border-0 text-white;
  }
  
  .card-info {
    @apply bg-gradient-to-br from-cyan-500 to-cyan-700 border-0 text-white;
  }
  
  .card-warning {
    @apply bg-gradient-to-br from-yellow-500 to-yellow-700 border-0 text-white;
  }
  
  /* Enhanced Tables */
  .table-enhanced {
    @apply mb-0;
  }
  
  .table-enhanced th {
    @apply border-t-0 font-semibold text-gray-600 bg-gray-50 px-3 py-4;
  }
  
  .table-enhanced td {
    @apply px-3 py-4 align-middle;
  }
  
  .table-enhanced tbody tr:hover {
    @apply bg-blue-50;
  }
  
  /* Enhanced Badges */
  .badge-enhanced {
    @apply text-xs px-3 py-2 rounded-md font-medium;
  }
  
  .badge-success {
    @apply bg-green-500 text-white;
  }
  
  .badge-warning {
    @apply bg-yellow-500 text-gray-900;
  }
  
  .badge-danger {
    @apply bg-red-500 text-white;
  }
  
  /* Signal List */
  .signal-list {
    @apply max-h-72 overflow-y-auto;
  }
  
  .signal-item {
    @apply bg-gray-50 border border-gray-200 transition-all duration-200
           hover:bg-gray-100 hover:translate-x-0.5;
  }
  
  /* Enhanced Buttons */
  .btn-enhanced {
    @apply rounded-lg px-4 py-2 font-medium transition-all duration-200
           hover:-translate-y-0.5;
  }
  
  .btn-outline-primary-enhanced {
    @apply border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white;
  }
  
  /* Form Controls */
  .form-select-enhanced {
    @apply rounded-lg border border-gray-300 px-4 py-2
           focus:border-blue-500 focus:shadow-lg focus:shadow-blue-500/25;
  }
  
  /* Performance Indicators */
  .performance-indicator {
    @apply inline-block w-3 h-3 rounded-full mr-2;
  }
  
  .performance-excellent {
    @apply bg-green-500;
  }
  
  .performance-good {
    @apply bg-cyan-500;
  }
  
  .performance-average {
    @apply bg-yellow-500;
  }
  
  .performance-poor {
    @apply bg-red-500;
  }
  
  /* Custom Scrollbar */
  .custom-scrollbar {
    @apply scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-400;
  }
}

/* ===== CUSTOM ANIMATIONS ===== */
@layer utilities {
  /* Fade In Animation */
  .fade-in {
    animation: fadeIn 0.3s ease-out;
  }
  
  /* Text Colors */
  .text-success-custom {
    @apply text-green-500;
  }
  
  .text-danger-custom {
    @apply text-red-500;
  }
  
  .text-warning-custom {
    @apply text-yellow-500;
  }
  
  .text-info-custom {
    @apply text-cyan-500;
  }
  
  .text-primary-custom {
    @apply text-blue-500;
  }
  
  /* Utility Classes */
  .opacity-75-custom {
    @apply opacity-75;
  }
  
  .fw-bold-custom {
    @apply font-semibold;
  }
}

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== RESPONSIVE DESIGN ===== */
@layer base {
  /* Base Body Styling */
  body {
    @apply bg-gray-50 font-sans;
  }
  
  /* Headers */
  h1, h2, h3, h4, h5, h6 {
    @apply text-gray-800;
  }
  
  .h3 {
    @apply font-semibold;
  }
  
  /* Icons */
  .fas {
    @apply mr-2;
  }
  
  /* Mobile Optimizations */
  @media (max-width: 768px) {
    .container-fluid {
      @apply px-2;
    }
    
    .card-body-enhanced {
      @apply p-4;
    }
    
    .table-responsive {
      @apply text-sm;
    }
    
    .d-flex.gap-2 {
      @apply flex-col gap-2;
    }
    
    .col-md-3 {
      @apply mb-4;
    }
  }
  
  @media (max-width: 576px) {
    .card-header-enhanced h5 {
      @apply text-base;
    }
    
    .table-enhanced th,
    .table-enhanced td {
      @apply px-1 py-2 text-xs;
    }
    
    .signal-item {
      @apply p-2;
    }
    
    .badge-enhanced {
      @apply text-xs px-2 py-1;
    }
  }
  
  /* Dark Mode Support */
  @media (prefers-color-scheme: dark) {
    body {
      @apply bg-gray-900 text-gray-100;
    }
    
    .card-enhanced {
      @apply bg-gray-800 text-gray-100;
    }
    
    .card-header-enhanced {
      @apply bg-gray-800 border-gray-700;
    }
    
    .table-enhanced th {
      @apply bg-gray-800 text-gray-100;
    }
    
    .signal-item {
      @apply bg-gray-800 border-gray-700 text-gray-100;
    }
    
    .signal-item:hover {
      @apply bg-gray-700;
    }
    
    h1, h2, h3, h4, h5, h6 {
      @apply text-gray-100;
    }
  }
}