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

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    --primary: 239 84% 67%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 14% 96%;
    --secondary-foreground: 222 47% 11%;

    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 46%;

    --accent: 220 14% 96%;
    --accent-foreground: 222 47% 11%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 239 84% 67%;

    --radius: 0.5rem;

    --chart-1: 239 84% 67%;
    --chart-2: 38 92% 50%;
    --chart-3: 142 76% 36%;
    --chart-4: 199 89% 48%;
    --chart-5: 0 84% 60%;

    --card-border: 220 13% 91%;
    --popover-border: 220 13% 91%;
    --primary-border: 239 84% 67%;
    --secondary-border: 220 14% 89%;
    --muted-border: 220 13% 91%;
    --accent-border: 220 13% 91%;
    --destructive-border: 0 84% 60%;

    --sidebar: 222 47% 6%;
    --sidebar-foreground: 220 9% 70%;
    --sidebar-primary: 239 84% 67%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 47% 10%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 222 47% 12%;
    --sidebar-ring: 239 84% 67%;

    --font-sans: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-serif: Georgia, serif;

    --sidebar-bg: 222 47% 6%;
    --sidebar-hover: 222 47% 10%;
    --sidebar-active: 239 84% 67%;
    --sidebar-text: 220 9% 70%;
    --sidebar-text-active: 0 0% 100%;

    --success: 142 76% 36%;
    --warning: 38 92% 50%;
    --info: 199 89% 48%;
  }

  .dark {
    --background: 222 47% 8%;
    --foreground: 210 40% 98%;

    --card: 222 47% 11%;
    --card-foreground: 210 40% 98%;

    --popover: 222 47% 11%;
    --popover-foreground: 210 40% 98%;

    --primary: 239 84% 67%;
    --primary-foreground: 0 0% 100%;

    --secondary: 222 47% 15%;
    --secondary-foreground: 210 40% 98%;

    --muted: 222 47% 15%;
    --muted-foreground: 215 20% 65%;

    --accent: 222 47% 15%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 222 47% 18%;
    --input: 222 47% 18%;
    --ring: 239 84% 67%;

    --sidebar-bg: 222 47% 4%;
    --sidebar-hover: 222 47% 8%;
    --sidebar-active: 239 84% 67%;
    --sidebar-text: 220 9% 60%;
    --sidebar-text-active: 0 0% 100%;

    --chart-1: 239 84% 67%;
    --chart-2: 38 92% 50%;
    --chart-3: 142 76% 36%;
    --chart-4: 199 89% 48%;
    --chart-5: 0 84% 60%;

    --card-border: 222 47% 18%;
    --popover-border: 222 47% 18%;
    --primary-border: 239 84% 67%;
    --secondary-border: 222 47% 20%;
    --muted-border: 222 47% 18%;
    --accent-border: 222 47% 18%;
    --destructive-border: 0 84% 60%;

    --sidebar: 222 47% 4%;
    --sidebar-foreground: 220 9% 60%;
    --sidebar-primary: 239 84% 67%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 47% 8%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 222 47% 10%;
    --sidebar-ring: 239 84% 67%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  code, pre, .font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
  }
}

/* Sidebar */
.nexus-sidebar {
  background: hsl(var(--sidebar-bg));
  width: 240px;
  min-height: 100vh;
  transition: width 0.2s ease;
  flex-shrink: 0;
}
.nexus-sidebar.collapsed {
  width: 64px;
}
.nexus-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 8px;
  color: hsl(var(--sidebar-text));
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  margin: 2px 8px;
}
.nexus-nav-item:hover {
  background: hsl(var(--sidebar-hover));
  color: hsl(var(--sidebar-text-active));
}
.nexus-nav-item.active {
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}
.nexus-nav-item .label {
  white-space: nowrap;
  overflow: hidden;
}

/* Status badges */
.status-connected { @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400; }
.status-disconnected { @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400; }
.status-waiting { @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400; }

/* Metric card */
.metric-card {
  @apply rounded-xl border bg-card p-5 shadow-sm hover:shadow-md transition-shadow;
}

/* Terminal */
.nexus-terminal {
  background: #0d1117;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #7ee787;
  padding: 12px;
  border-radius: 8px;
  overflow-y: auto;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }

/* NEXUS logo mark */
.nexus-logo-ring {
  animation: pulse-ring 3s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Wizard stepper */
.wizard-step {
  @apply flex items-center gap-3 p-4 rounded-lg border transition-all;
}
.wizard-step.active { @apply border-primary bg-primary/5; }
.wizard-step.completed { @apply border-green-500 bg-green-50 dark:bg-green-900/10; }
.wizard-step.pending { @apply border-border opacity-60; }