/* Google Fonts — must be first */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

@import "tailwindcss";

@theme {
  --color-background: #0c150f;
  --color-surface: #0c150f;
  --color-surface-dim: #0c150f;
  --color-surface-container-lowest: #07100a;
  --color-surface-container-low: #141e17;
  --color-surface-container: #18221b;
  --color-surface-container-high: #232c25;
  --color-surface-container-highest: #2d3730;
  --color-surface-variant: #2d3730;
  --color-surface-bright: #323c34;
  --color-on-surface: #dae5da;
  --color-on-surface-variant: #b9cbbc;
  --color-on-background: #dae5da;
  --color-primary: #f3fff3;
  --color-primary-container: #00ff9c;
  --color-on-primary: #00391f;
  --color-on-primary-container: #007142;
  --color-primary-fixed: #56ffa7;
  --color-primary-fixed-dim: #00e38a;
  --color-inverse-primary: #006d40;
  --color-secondary: #bdf4ff;
  --color-secondary-container: #00e3fd;
  --color-on-secondary: #00363d;
  --color-on-secondary-container: #00616d;
  --color-secondary-fixed: #9cf0ff;
  --color-secondary-fixed-dim: #00daf3;
  --color-tertiary: #fffaff;
  --color-tertiary-container: #ffdd65;
  --color-on-tertiary: #3b2f00;
  --color-on-tertiary-container: #766000;
  --color-tertiary-fixed: #ffe17a;
  --color-tertiary-fixed-dim: #e4c44f;
  --color-outline: #849587;
  --color-outline-variant: #3b4b3f;
  --color-error: #ffb4ab;
  --color-error-container: #93000a;
  --color-on-error: #690005;
  --color-on-error-container: #ffdad6;
  --color-inverse-surface: #dae5da;
  --color-inverse-on-surface: #29332b;
  --color-surface-tint: #00e38a;

  --font-sans: 'Space Grotesk', sans-serif;
}



#root {
  min-height: 100vh;
  background-color: #050210;
}

html {
  background-color: #050210;
}

body {
  background: radial-gradient(ellipse at 30% 20%, #1a0a2e 0%, #0a0414 40%, #050210 100%);
  background-attachment: fixed;
  background-color: #050210;
  color: #e2d9f3;
  font-family: 'Space Grotesk', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Material Symbols */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Scan line animation */
@keyframes scanMove {
  0%   { top: 0%; }
  100% { top: 100%; }
}

.scan-line {
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 255, 156, 0.15) 50%, transparent 100%);
  animation: scanMove 4s linear infinite;
  height: 2px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0.6;
}

/* Blinking cursor */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.blinking-cursor::after {
  content: '_';
  animation: blink 1s step-end infinite;
}

/* Shimmer */
@keyframes shimmer {
  100% { transform: translateX(200%); }
}

/* Glass panel */
.glass-panel {
  background: rgba(35, 44, 37, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 255, 156, 0.1);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05);
}

/* Glow borders */
.glow-border-primary {
  border: 1px solid rgba(0, 255, 156, 0.3) !important;
  box-shadow: 0 0 15px rgba(0, 255, 156, 0.1);
}
.glow-border-error {
  border: 1px solid rgba(255, 180, 171, 0.3) !important;
  box-shadow: 0 0 15px rgba(255, 180, 171, 0.1);
}

/* Drag-over state */
.drag-over {
  border-color: #00ff9c !important;
  background: rgba(0, 255, 156, 0.05) !important;
  box-shadow: 0 0 40px rgba(0, 255, 156, 0.15) inset !important;
}

/* Pipeline step */
.pipeline-step { transition: opacity 0.4s ease; }
.pipeline-step.pending  { opacity: 0.3; }
.pipeline-step.active   { opacity: 1; }
.pipeline-step.done     { opacity: 0.6; }

/* Timeline bar */
.tl-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}
.tl-bar-outer {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.05);
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  position: relative;
  flex: 1;
}
.tl-bar-inner {
  width: 100%;
  border-radius: 2px 2px 0 0;
  transition: height 0.8s cubic-bezier(0.22,1,0.36,1);
}
.tl-bar:hover .tl-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.tl-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #0a0f0a;
  border: 1px solid #00ff9c;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
  font-family: 'Space Grotesk', monospace;
  color: #ffffff !important;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(0,255,156,0.3);
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0c150f; }
::-webkit-scrollbar-thumb { background: rgba(0,255,156,0.25); border-radius: 4px; }

/* Noise bg */
.noise-bg {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spin-slow-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.animate-spin-slow         { animation: spin-slow 20s linear infinite; }
.animate-spin-slow-reverse { animation: spin-slow-reverse 15s linear infinite; }
.animate-spin-fast         { animation: spin-slow 3s linear infinite; }
.animate-spin-medium       { animation: spin-slow 8s linear infinite; }