@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom CSS for CryptoGateway Pro */

@layer base {
  html {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
}

@layer components {
  /* Crypto currency icons */
  .crypto-icon {
    @apply w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-bold;
  }

  .crypto-icon.btc {
    @apply from-orange-400 to-orange-600;
  }

  .crypto-icon.eth {
    @apply from-blue-500 to-indigo-600;
  }

  .crypto-icon.usdt {
    @apply from-green-400 to-green-600;
  }

  .crypto-icon.usdc {
    @apply from-blue-400 to-blue-600;
  }

  .crypto-icon.bnb {
    @apply from-yellow-400 to-yellow-600;
  }

  .crypto-icon.ltc {
    @apply from-gray-400 to-gray-600;
  }

  .crypto-icon.trx {
    @apply from-red-400 to-red-600;
  }

  /* Status badges */
  .status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .status-badge.pending {
    @apply bg-yellow-100 text-yellow-800;
  }

  .status-badge.confirming {
    @apply bg-blue-100 text-blue-800;
  }

  .status-badge.completed {
    @apply bg-green-100 text-green-800;
  }

  .status-badge.expired {
    @apply bg-red-100 text-red-800;
  }

  .status-badge.failed {
    @apply bg-red-100 text-red-800;
  }

  /* Cards */
  .card {
    @apply bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
  }

  .card-body {
    @apply px-6 py-4;
  }

  /* Buttons */
  .btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-150 ease-in-out;
  }

  .btn-primary {
    @apply text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
  }

  .btn-secondary {
    @apply text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500 border-gray-300;
  }

  .btn-success {
    @apply text-white bg-green-600 hover:bg-green-700 focus:ring-green-500;
  }

  .btn-danger {
    @apply text-white bg-red-600 hover:bg-red-700 focus:ring-red-500;
  }

  .btn-lg {
    @apply px-6 py-3 text-base;
  }

  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  /* Forms */
  .form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
  }

  .form-select {
    @apply block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .form-error {
    @apply mt-1 text-sm text-red-600;
  }

  /* Navigation */
  .nav-link {
    @apply text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out;
  }

  .nav-link.active {
    @apply text-blue-600 bg-blue-50;
  }

  /* Loading spinner */
  .spinner {
    @apply animate-spin h-5 w-5 border-2 border-gray-300 border-t-blue-600 rounded-full;
  }

  /* Payment status animations */
  .pulse-animation {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .bounce-animation {
    animation: bounce 1s infinite;
  }

  /* QR Code container */
  .qr-container {
    @apply p-4 bg-white rounded-lg border-2 border-dashed border-gray-300 text-center;
  }

  /* Crypto address display */
  .crypto-address {
    @apply font-mono text-sm bg-gray-100 border border-gray-300 rounded px-3 py-2 break-all;
  }

  /* Responsive tables */
  .table-responsive {
    @apply overflow-x-auto shadow ring-1 ring-black ring-opacity-5 md:rounded-lg;
  }

  .table {
    @apply min-w-full divide-y divide-gray-300;
  }

  .table-header {
    @apply bg-gray-50;
  }

  .table-header th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }

  .table-body {
    @apply bg-white divide-y divide-gray-200;
  }

  .table-row {
    @apply hover:bg-gray-50;
  }

  .table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
  }

  /* Statistics cards */
  .stat-card {
    @apply bg-white overflow-hidden shadow rounded-lg;
  }

  .stat-card-content {
    @apply p-5;
  }

  .stat-card-icon {
    @apply flex items-center;
  }

  .stat-card-data {
    @apply ml-5 w-0 flex-1;
  }

  .stat-card-label {
    @apply text-sm font-medium text-gray-500 truncate;
  }

  .stat-card-value {
    @apply text-lg font-medium text-gray-900;
  }

  /* Alert messages */
  .alert {
    @apply rounded-md p-4 mb-4;
  }

  .alert-success {
    @apply bg-green-50 border border-green-200 text-green-800;
  }

  .alert-error {
    @apply bg-red-50 border border-red-200 text-red-800;
  }

  .alert-warning {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-800;
  }

  .alert-info {
    @apply bg-blue-50 border border-blue-200 text-blue-800;
  }
}

@layer utilities {
  .text-gradient {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .bg-gradient-primary {
    background: linear-gradient(to right, #3b82f6, #8b5cf6);
  }

  .bg-gradient-success {
    background: linear-gradient(to right, #10b981, #059669);
  }
}

/* Custom keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.4s ease-out;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-900 {
    background-color: #111827;
  }
  
  .dark\:text-white {
    color: #ffffff;
  }
  
  .dark\:border-gray-700 {
    border-color: #374151;
  }
}