@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap');

@layer base {
  :root {
    /* Modern Dark Theme */
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
    --radius: 0.75rem;
    
    /* Custom CSS Variables */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  }
  
  * {
    @apply border-border;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply bg-background text-foreground min-h-screen;
    font-feature-settings: "rlig" 1, "calt" 1;
    background-image: 
      radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
      linear-gradient(180deg, hsl(var(--background)) 0%, rgba(0,0,0,0.8) 100%);
    background-attachment: fixed;
  }
  
  /* Glass morphism base utility */
  .glass {
    @apply backdrop-blur-xl bg-white/5 border border-white/10;
  }
  
  .glass-strong {
    @apply backdrop-blur-2xl bg-white/10 border border-white/20;
  }
  
  /* Gradient text effects */
  .gradient-text {
    @apply bg-gradient-to-r from-blue-400 via-purple-500 to-emerald-400 bg-clip-text text-transparent;
  }
  
  /* Shimmer effect */
  .shimmer {
    position: relative;
    overflow: hidden;
  }
  
  .shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 2s infinite;
  }
  
  /* Floating animation */
  .float {
    animation: float 6s ease-in-out infinite;
  }
  
  /* Glow effects */
  .glow-blue {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }
  
  .glow-purple {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
  }
  
  .glow-emerald {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  }
  
  /* Interactive hover states */
  .interactive {
    @apply transition-all duration-300 ease-out;
  }
  
  .interactive:hover {
    @apply scale-105 shadow-2xl;
  }
  
  /* Grid background pattern */
  .grid-bg {
    background-image: 
      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
  }
}

@layer components {
  /* Modern Button Components */
  .btn {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
  }
  
  .btn-primary {
    @apply btn bg-primary text-primary-foreground shadow-lg hover:bg-primary/90 hover:shadow-xl hover:scale-105;
  }
  
  .btn-glass {
    @apply btn glass text-white hover:bg-white/10 hover:shadow-2xl hover:scale-105;
  }
  
  .btn-gradient {
    @apply btn bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-lg hover:from-blue-600 hover:to-purple-700 hover:shadow-xl hover:scale-105;
  }
  
  /* Modern Card Components */
  .card {
    @apply rounded-xl border bg-card text-card-foreground shadow-lg;
  }
  
  .card-glass {
    @apply glass rounded-xl shadow-2xl backdrop-blur-xl;
  }
  
  .card-gradient {
    @apply bg-gradient-to-br from-blue-500/10 to-purple-600/10 border border-white/20 rounded-xl shadow-2xl backdrop-blur-xl;
  }
  
  /* Modern Input Components */
  .input {
    @apply flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-all duration-300 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50;
  }
  
  .input-glass {
    @apply input glass border-white/20 focus-visible:border-white/40 focus-visible:shadow-lg;
  }
  
  /* Navigation Components */
  .nav-glass {
    @apply glass fixed top-0 left-0 right-0 z-50 border-b border-white/10;
  }
  
  .nav-item {
    @apply px-4 py-2 rounded-lg transition-all duration-300 hover:bg-white/10 hover:shadow-lg;
  }
  
  .nav-item-active {
    @apply nav-item bg-white/15 shadow-lg;
  }
  
  /* Terminal-inspired components for continuity */
  .terminal-glass {
    @apply glass rounded-xl shadow-2xl font-mono;
  }
  
  .terminal-header {
    @apply flex items-center justify-between p-4 border-b border-white/10;
  }
  
  .terminal-controls {
    @apply flex space-x-2;
  }
  
  .terminal-control {
    @apply w-3 h-3 rounded-full;
  }
  
  .terminal-control-red {
    @apply terminal-control bg-red-500 hover:bg-red-400 transition-colors duration-200;
  }
  
  .terminal-control-yellow {
    @apply terminal-control bg-yellow-500 hover:bg-yellow-400 transition-colors duration-200;
  }
  
  .terminal-control-green {
    @apply terminal-control bg-green-500 hover:bg-green-400 transition-colors duration-200;
  }
  
  /* Form components */
  .form-glass {
    @apply glass p-8 rounded-xl shadow-2xl backdrop-blur-xl;
  }
  
  .form-group {
    @apply space-y-2;
  }
  
  .form-label {
    @apply text-sm font-medium text-foreground;
  }
  
  /* Modern table styling */
  .table-glass {
    @apply glass rounded-xl overflow-hidden;
  }
  
  .table-header {
    @apply bg-white/5 border-b border-white/10;
  }
  
  .table-row {
    @apply border-b border-white/5 hover:bg-white/5 transition-colors duration-200;
  }
  
  .table-cell {
    @apply px-6 py-4 text-sm;
  }
  
  /* Status indicators */
  .status-indicator {
    @apply w-2 h-2 rounded-full;
  }
  
  .status-online {
    @apply status-indicator bg-green-400 shadow-lg;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  }
  
  .status-offline {
    @apply status-indicator bg-red-400 shadow-lg;
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.6);
  }
  
  /* Animated background elements */
  .bg-animated {
    position: relative;
    overflow: hidden;
  }
  
  .bg-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-45deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05), rgba(16, 185, 129, 0.05), rgba(59, 130, 246, 0.05));
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
    pointer-events: none;
  }
  
  @keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* Loading animations */
  .loading-dots {
    @apply inline-flex space-x-1;
  }
  
  .loading-dot {
    @apply w-1 h-1 bg-current rounded-full animate-pulse;
  }
  
  .loading-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  
  .loading-dot:nth-child(3) {
    animation-delay: 0.4s;
  }
  
  /* Sidebar components */
  .sidebar-glass {
    @apply glass border-r border-white/10 backdrop-blur-xl;
  }
  
  .sidebar-item {
    @apply flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-all duration-300 hover:bg-white/10 hover:shadow-lg;
  }
  
  .sidebar-item-active {
    @apply sidebar-item bg-white/15 shadow-lg;
  }
  
  /* Modal components */
  .modal-backdrop {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-40;
  }
  
  .modal-glass {
    @apply glass rounded-xl shadow-2xl backdrop-blur-2xl z-50;
  }
  
  /* Toast notifications */
  .toast {
    @apply glass rounded-lg p-4 shadow-2xl backdrop-blur-xl border border-white/20;
  }
  
  .toast-success {
    @apply toast border-green-500/30;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
  }
  
  .toast-error {
    @apply toast border-red-500/30;
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.2);
  }
  
  .toast-warning {
    @apply toast border-yellow-500/30;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
  }
  
  .toast-info {
    @apply toast border-blue-500/30;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
  }
}

@layer utilities {
  /* Custom scroll bars */
  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }
  
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 4px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }
}

/* Custom animations for enhanced user experience */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animation utilities */
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-scale-in {
  animation: scale-in 0.4s ease-out forwards;
}

.animate-slide-in-right {
  animation: slide-in-right 0.5s ease-out forwards;
}

/* Stagger children animations */
.stagger-children > * {
  opacity: 0;
  animation: fade-in-up 0.6s ease-out forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }