/* Bothunter - Tailwind CSS Theme Configuration */
/* postcss-import */
/* tailwindcss */
/* autoprefixer */

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

/* ===== CUSTOM COMPONENT CLASSES ===== */
@layer components {
  /* Gradient Background Utility */
  .gradient-bg {
    @apply bg-gradient-to-br from-indigo-500 to-purple-600;
  }
  
  /* Card Shadow Utility */
  .card-shadow {
    @apply shadow-xl shadow-black/10;
  }
  
  /* Crypto Icon Component */
  .crypto-icon {
    @apply w-6 h-6 rounded-full bg-gradient-to-br from-orange-400 to-orange-500 
           inline-flex items-center justify-center text-white font-bold text-xs
           dark:from-gray-700 dark:to-gray-600 dark:text-gray-200;
  }
  
  /* Status Indicator Component */
  .status-indicator {
    @apply w-2 h-2 rounded-full inline-block md:w-3 md:h-3;
  }
  
  .status-online {
    @apply bg-green-500;
  }
  
  .status-offline {
    @apply bg-red-500;
  }
  
  .status-warning {
    @apply bg-yellow-500;
  }
  
  /* Button Variants */
  .btn-primary-custom {
    @apply px-6 py-2.5 rounded-full font-semibold uppercase tracking-wide
           bg-gradient-to-r from-indigo-500 to-purple-600 text-white
           hover:-translate-y-0.5 hover:shadow-lg transition-all duration-300
           border-0;
  }
  
  .btn-success-custom {
    @apply px-6 py-2.5 rounded-full font-semibold uppercase tracking-wide
           bg-gradient-to-r from-green-500 to-emerald-500 text-white
           hover:-translate-y-0.5 hover:shadow-lg transition-all duration-300
           border-0;
  }
  
  .btn-danger-custom {
    @apply px-6 py-2.5 rounded-full font-semibold uppercase tracking-wide
           bg-gradient-to-r from-red-500 to-pink-500 text-white
           hover:-translate-y-0.5 hover:shadow-lg transition-all duration-300
           border-0;
  }
  
  /* Stats Card */
  .stats-card {
    @apply bg-white dark:bg-gray-800 rounded-2xl p-6 text-center
           shadow-lg border border-gray-200 dark:border-gray-700
           transition-all duration-300 h-full
           hover:-translate-y-1 hover:shadow-xl;
  }
  
  .stats-card.success {
    @apply bg-gradient-to-br from-green-50 to-emerald-100 border-green-500
           dark:from-green-900/20 dark:to-emerald-900/20 dark:border-green-600;
  }
  
  .stats-card.danger {
    @apply bg-gradient-to-br from-red-50 to-pink-100 border-red-500
           dark:from-red-900/20 dark:to-pink-900/20 dark:border-red-600;
  }
  
  /* Position Card */
  .position-card {
    @apply border-0 rounded-2xl mb-5 shadow-lg transition-all duration-300 overflow-hidden
           hover:-translate-y-1 hover:shadow-xl;
  }
  
  .position-card.open {
    @apply border-l-4 border-cyan-500;
  }
  
  .position-card.profit {
    @apply border-l-4 border-green-500;
  }
  
  .position-card.loss {
    @apply border-l-4 border-red-500;
  }
  
  /* AI Thoughts */
  .ai-thoughts {
    @apply bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20
           rounded-xl p-4 border-l-4 border-indigo-500 mt-4;
  }
  
  /* AI Confidence Badges */
  .ai-confidence {
    @apply inline-block px-4 py-2 rounded-full font-bold text-sm text-center min-w-16;
  }
  
  .confidence-high {
    @apply bg-gradient-to-r from-green-500 to-emerald-500 text-white;
  }
  
  .confidence-medium {
    @apply bg-gradient-to-r from-yellow-500 to-orange-500 text-white;
  }
  
  .confidence-low {
    @apply bg-gradient-to-r from-red-500 to-pink-500 text-white;
  }
  
  /* Chart Container */
  .chart-container {
    @apply bg-white dark:bg-gray-800 rounded-2xl p-6 mb-8
           shadow-lg border border-gray-200 dark:border-gray-700;
  }
  
  /* Metric Box */
  .metric-box {
    @apply bg-white dark:bg-gray-800 rounded-xl p-5 text-center mb-4
           shadow-md border border-gray-200 dark:border-gray-700
           transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg;
  }
  
  /* Badge Custom */
  .badge-custom {
    @apply px-3 py-2 rounded-full text-xs font-semibold uppercase tracking-wider;
  }
  
  /* Filter Section */
  .filter-section {
    @apply bg-gray-50 dark:bg-gray-800 p-5 rounded-2xl my-5
           border border-gray-200 dark:border-gray-700;
  }
  
  /* Main Card */
  .main-card {
    @apply bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm rounded-3xl
           shadow-2xl border border-white/20 dark:border-gray-700/20;
  }
  
  /* Page Header */
  .page-header {
    @apply bg-gradient-to-r from-slate-800 to-slate-700 text-white
           p-8 rounded-t-3xl text-center;
  }
  
  /* History Container */
  .history-container {
    @apply bg-gradient-to-br from-indigo-500 to-purple-600 min-h-screen py-5;
  }
}

/* ===== CUSTOM ANIMATIONS ===== */
@layer utilities {
  /* Pulse Animations */
  .pulse-green {
    animation: pulse-green 2s infinite;
  }
  
  .pulse-red {
    animation: pulse-red 2s infinite;
  }
  
  /* Fade In Animation */
  .fade-in {
    animation: fadeIn 0.5s ease-in;
  }
  
  /* Slide Up Animation */
  .slide-up {
    animation: slideUp 0.3s ease-out;
  }
  
  /* Scrollable Containers */
  .scrollable-container {
    @apply max-h-52 overflow-y-auto;
  }
  
  .scrollable-container-large {
    @apply max-h-96 overflow-y-auto;
  }
  
  /* Hidden Element */
  .hidden-element {
    @apply hidden;
  }
}

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes pulse-green {
  0%, 100% { background-color: rgb(34, 197, 94); }
  50% { background-color: rgb(22, 163, 74); }
}

@keyframes pulse-red {
  0%, 100% { background-color: rgb(239, 68, 68); }
  50% { background-color: rgb(220, 38, 38); }
}

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

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

/* ===== SCROLLBAR STYLING ===== */
@layer base {
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800 rounded;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  .history-container {
    @apply bg-white p-0;
  }
  
  .main-card {
    @apply shadow-none border border-gray-300;
  }
  
  .page-header {
    @apply bg-gray-100 text-gray-900;
  }
  
  .btn, .nav-tabs {
    @apply hidden;
  }
  
  .position-card {
    @apply break-inside-avoid shadow-none border border-gray-300;
  }
}

/* ===== ALPINE.JS CLOAK ===== */
[x-cloak] {
  display: none !important;
}