/**
 * Tutorial System Styles
 * Uses design tokens from RubriqFlow's Tailwind CSS
 * Completely isolated - won't affect React components
 */

:root {
  /* Tutorial-specific z-index layers */
  --tutorial-z-overlay: 9998;
  --tutorial-z-spotlight: 9999;
  --tutorial-z-tooltip: 10000;
  --tutorial-z-progress: 10001;
  --tutorial-z-launcher: 10002;

  /* Tutorial colors */
  --tutorial-backdrop: rgba(0, 0, 0, 0.75);
  --tutorial-spotlight-ring: #3b82f6;
  --tutorial-spotlight-shadow: 0 0 0 9999px var(--tutorial-backdrop);

  /* Fallback design tokens (if Tailwind CSS not loaded) */
  --tutorial-color-bg: #ffffff;
  --tutorial-color-text: #111827;
  --tutorial-color-border: #e5e7eb;
  --tutorial-color-primary: #3b82f6;
  --tutorial-color-primary-hover: #2563eb;
  --tutorial-radius: 8px;
  --tutorial-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --tutorial-transition: all 200ms ease-out;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --tutorial-color-bg: #1f2937;
    --tutorial-color-text: #f9fafb;
    --tutorial-color-border: #374151;
  }
}

/* ============================================
   Overlay Component
   ============================================ */
tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--tutorial-z-overlay);
  pointer-events: none;
  display: block;
}

/* ============================================
   Spotlight Component
   ============================================ */
tutorial-spotlight {
  position: absolute;
  z-index: var(--tutorial-z-spotlight);
  pointer-events: none;
  border: 3px solid var(--tutorial-spotlight-ring);
  border-radius: var(--tutorial-radius);
  box-shadow: var(--tutorial-spotlight-shadow);
  transition: var(--tutorial-transition);
  animation: tutorial-pulse 2s ease-in-out infinite;
}

@keyframes tutorial-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* ============================================
   Tooltip Component
   ============================================ */
tutorial-tooltip {
  position: absolute;
  z-index: var(--tutorial-z-tooltip);
  max-width: 360px;
  display: block;
}

tutorial-tooltip.position-top {
  /* Positioned above target */
}

tutorial-tooltip.position-bottom {
  /* Positioned below target */
}

tutorial-tooltip.position-left {
  /* Positioned left of target */
}

tutorial-tooltip.position-right {
  /* Positioned right of target */
}

tutorial-tooltip.position-center {
  /* Centered on screen */
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
}

/* ============================================
   Progress Indicator Component
   ============================================ */
tutorial-progress {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--tutorial-z-progress);
  min-width: 280px;
  display: block;
  transition: var(--tutorial-transition);
}

tutorial-progress.minimized {
  min-width: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

/* ============================================
   Launcher (FAB) Component
   ============================================ */
tutorial-launcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--tutorial-z-launcher);
  display: block;
}

/* ============================================
   Animations
   ============================================ */
@keyframes tutorial-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tutorial-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Apply animations */
tutorial-overlay {
  animation: tutorial-fade-in 300ms ease-out;
}

tutorial-tooltip {
  animation: tutorial-scale-in 200ms ease-out;
}

tutorial-spotlight {
  animation: tutorial-scale-in 200ms ease-out, tutorial-pulse 2s ease-in-out 200ms infinite;
}

/* ============================================
   Utility Classes
   ============================================ */
.tutorial-hidden {
  display: none !important;
}

.tutorial-visible {
  display: block !important;
}

/* ============================================
   Accessibility
   ============================================ */
tutorial-tooltip:focus-within {
  outline: 2px solid var(--tutorial-color-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  tutorial-spotlight {
    border-width: 4px;
  }

  tutorial-tooltip {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  tutorial-overlay,
  tutorial-tooltip,
  tutorial-spotlight,
  tutorial-progress {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 640px) {
  tutorial-tooltip {
    max-width: calc(100vw - 32px);
    left: 16px !important;
    right: 16px !important;
  }

  tutorial-progress {
    bottom: 10px;
    right: 10px;
    min-width: 240px;
  }

  tutorial-launcher {
    bottom: 10px;
    right: 10px;
  }
}