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

/* Preview theme isolation - allows preview to override root dark mode */
.preview-light {
  /* Force light mode variables even when root has dark class */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 196 91% 46%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 196 91% 46%;
}

/* Ensure preview-light overrides dark mode styles */
.preview-light,
.preview-light * {
  color-scheme: light;
}

.preview-light.dark {
  /* If both classes exist, dark takes precedence */
  color-scheme: dark;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes gradient-wave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-glow-button {
  background: linear-gradient(
    90deg,
    #3b82f6 0%,
    #8b5cf6 25%,
    #ec4899 50%,
    #8b5cf6 75%,
    #3b82f6 100%
  );
  background-size: 200% 200%;
  animation: gradient-wave 3s ease infinite;
  position: relative;
  overflow: hidden;
}

.gradient-glow-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer-wave 2s infinite;
}

@keyframes shimmer-wave {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes white-pulse-border {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.4);
  }
}

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 220 13% 13%;

    --card: 0 0% 100%;
    --card-foreground: 220 13% 13%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 13% 13%;

    /* Brand Blue - Primary Action Color (#0BA6DF) */
    --brand-blue: 196 91% 46%; /* #0BA6DF in HSL */
    --brand-blue-dark: 196 91% 40%; /* Hover/active states */
    --brand-blue-light: 196 91% 70%; /* Light backgrounds */
    --brand-blue-border: 196 91% 50%; /* Borders */
    --brand-blue-text: 196 91% 35%; /* Text color for better contrast */

    --primary: 196 91% 46%; /* Brand blue - new color #0BA6DF */
    --primary-foreground: 0 0% 100%;
    --primary-glow: 196 91% 52%; /* Slightly brighter for glow effects */

    --secondary: 220 14% 96%;
    --secondary-foreground: 220 13% 13%;

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

    --accent: 196 91% 46%; /* Match primary - brand blue */
    --accent-foreground: 0 0% 100%;

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

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 196 91% 46%; /* Brand blue focus rings */

    /* Custom design tokens */
    --hero-gradient: linear-gradient(135deg, hsl(196 91% 46%), hsl(196 91% 52%));
    --section-bg: 0 0% 98%;
    --glass-bg: 0 0% 100% / 0.8;
    --shadow-soft: 0 4px 20px hsl(196 91% 46% / 0.1);
    --shadow-hero: 0 20px 60px hsl(196 91% 46% / 0.3);
    
    /* Dashboard-specific backgrounds (separate from onboarding) */
    --dashboard-background-light: 0 0% 98%; /* Light professional background */
    --dashboard-background-dark: 0 0% 9.4%; /* #181818 - Matte dark gray */
    
    /* Simplified Shadow System */
    --shadow-card: 0 2px 8px hsl(220 13% 13% / 0.1);
    --shadow-card-hover: 0 4px 16px hsl(220 13% 13% / 0.15);
    
    /* Simplified Animations */
    --transition-fast: all 0.2s ease;
    --transition-smooth: all 0.3s ease;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 0 0% 9.4%; /* #181818 - Matte dark gray */
    --foreground: 210 40% 98%;

    --card: 0 0% 9.4%; /* #181818 - Matte dark gray */
    --card-foreground: 210 40% 98%;

    --popover: 0 0% 9.4%; /* #181818 - Matte dark gray */
    --popover-foreground: 210 40% 98%;

    /* Brand blue variants for dark mode */
    --brand-blue: 196 91% 46%; /* Same as light mode - new brand blue #0BA6DF */
    --brand-blue-dark: 196 91% 52%; /* Slightly brighter for dark mode hover */
    --brand-blue-light: 196 91% 15%; /* Very dark background tint for dark mode */
    --brand-blue-border: 196 91% 40%; /* Visible but not too bright */
    --brand-blue-text: 196 91% 65%; /* Brighter for dark mode readability - INVERTED */

    --primary: 196 91% 46%; /* Brand blue - same in dark mode */
    --primary-foreground: 222.2 47.4% 11.2%; /* Dark text on brand blue */
    --primary-glow: 196 91% 52%; /* Slightly brighter for dark mode */

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 75%; /* Lighter muted text - INVERTED from light mode */

    --accent: 196 91% 46%; /* Match primary - brand blue */
    --accent-foreground: 222.2 47.4% 11.2%; /* Dark text on accent */

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 25%; /* Lighter borders for visibility on dark bg - INVERTED */
    --input: 217.2 32.6% 17.5%;
    --ring: 196 91% 46%; /* Brand blue focus rings */
    
    /* Dashboard-specific backgrounds (separate from onboarding) */
    --dashboard-background-light: 0 0% 98%; /* Light professional background */
    --dashboard-background-dark: 0 0% 9.4%; /* #181818 - Matte dark gray */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
  
  html {
    scroll-behavior: smooth;
  }

  /* Prevent text selection and cursor on all elements by default */
  * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  /* Allow text selection only for form inputs and textareas */
  input, textarea, [contenteditable="true"] {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
  }

  /* Allow text selection for elements explicitly marked as editable (dashboard inline editing) */
  .editable-text {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text;
  }

  /* Allow text selection for read-only content viewers (modals, previews) */
  .selectable-content,
  .selectable-content * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text !important;
  }

  /* Prevent focus and cursor on non-interactive text elements */
  h1, h2, h3, h4, h5, h6, p, span, div, li, td, th, label {
    outline: none !important;
    cursor: default !important;
  }

  /* Only allow focus and proper cursor on interactive elements */
  a, button, input, textarea, select, [tabindex]:not([tabindex="-1"]), [role="button"] {
    outline: revert;
    cursor: revert;
  }

  /* Links should have pointer cursor */
  a {
    cursor: pointer;
  }

  /* Buttons should have pointer cursor */
  button {
    cursor: pointer;
  }
}

@layer components {
  .hero-section {
    @apply relative min-h-screen flex items-center justify-center overflow-hidden;
    background: var(--hero-gradient);
  }
  
  .glass-card {
    @apply backdrop-blur-sm border border-white/20 rounded-2xl p-8;
    background: var(--glass-bg);
    box-shadow: var(--shadow-soft);
  }
  
  /* Enhanced glass card for navigation */
  .glass-nav {
    @apply backdrop-blur-lg border border-white/10 rounded-xl;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }
  
  .dark .glass-nav {
    background: rgba(17, 24, 39, 0.95); /* gray-900 with opacity */
    border-color: rgba(255, 255, 255, 0.05);
  }
  
  .section-container {
    @apply max-w-6xl mx-auto px-6 py-16 md:py-20;
  }
  
  .section-container-tight {
    @apply max-w-6xl mx-auto px-6 py-8 md:py-16;
  }
  
  /* Simplified Experience Card */
  .experience-card {
    @apply bg-card rounded-xl p-6 border border-border;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
  }
  
  .experience-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: hsl(var(--primary) / 0.2);
  }
  
  .experience-badge {
    transition: var(--transition-fast);
  }
  
  .experience-card:hover .experience-badge {
    background: hsl(var(--primary) / 0.1);
    border-color: hsl(var(--primary) / 0.3);
  }
  
  .experience-title {
    color: hsl(var(--primary));
    transition: var(--transition-fast);
  }
  
  .experience-card:hover .experience-title {
    color: hsl(var(--primary));
  }
  
  .experience-company {
    color: hsl(var(--foreground));
    transition: var(--transition-fast);
  }
  
  .experience-card:hover .experience-company-link {
    color: hsl(var(--primary));
  }
  
  .skill-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary border border-primary/20;
  }
  
  .skill-card {
    @apply relative bg-[hsl(var(--dashboard-background-light))] dark:bg-[hsl(var(--dashboard-background-dark))] backdrop-blur-sm border border-border/50 rounded-xl p-3 md:p-4 h-full min-h-[60px] md:min-h-[70px] flex items-center justify-center text-center hover:bg-[hsl(var(--dashboard-background-light))] dark:hover:bg-[hsl(var(--dashboard-background-dark))] hover:border-primary/30 transition-all duration-300 cursor-default;
  }
  
  .skill-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
  }
  
  .skill-text {
    @apply text-xs md:text-sm font-medium text-foreground leading-tight;
  }

  /* Social Link Circle Styles */
  .social-link-circle {
    @apply relative bg-card/50 backdrop-blur-sm border border-border/50 rounded-full flex items-center justify-center hover:bg-card hover:border-primary/30 transition-all duration-300 cursor-pointer;
  }

  .social-link-circle:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-card-hover);
  }

  .social-link-input {
    @apply w-full px-3 py-2 text-sm border-2 border-primary rounded-lg bg-white outline-none;
  }
  
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-fade-up {
    animation: fade-up 0.8s ease-out forwards;
  }
  
  .animate-elegant-wink {
    animation: elegant-wink 4.5s ease-in-out infinite;
  }

  /* Simplified Premium Button Styles */
  .premium-experience-button {
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
    transition: var(--transition-smooth);
  }

  .premium-experience-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
  }

  /* Simplified glow border animation */

  /* Simplified QR Card Styles */
  .qr-card-3d {
    filter: drop-shadow(0 10px 25px hsl(220 13% 13% / 0.15));
  }
  
  .qr-image-container {
    @apply relative bg-white rounded-2xl p-3 sm:p-4 border border-border/20;
    width: 272px;
    height: 272px;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
  }

  @media (min-width: 640px) {
    .qr-image-container {
      width: 312px;
      height: 312px;
    }
  }
  
  .qr-image-container:hover {
    transform: scale(1.02);
    background: hsl(var(--card));
    border-color: hsl(var(--primary) / 0.3);
    box-shadow: var(--shadow-card-hover);
  }
  
  .qr-placeholder {
    @apply relative bg-gradient-to-br from-primary to-primary/80 rounded-xl overflow-hidden;
    width: 240px;
    height: 240px;
  }

  @media (min-width: 640px) {
    .qr-placeholder {
      width: 280px;
      height: 280px;
    }
  }
  
  /* QR Pattern Background */
  .qr-pattern {
    @apply absolute inset-0 opacity-20;
    background-image: 
      repeating-linear-gradient(0deg, transparent, transparent 10px, hsl(0 0% 100% / 0.3) 10px, hsl(0 0% 100% / 0.3) 12px),
      repeating-linear-gradient(90deg, transparent, transparent 10px, hsl(0 0% 100% / 0.3) 10px, hsl(0 0% 100% / 0.3) 12px);
  }
  
  /* Enhanced QR Link Styling */
  .qr-link {
    @apply relative inline-block text-primary font-semibold text-lg hover:text-primary/80;
    text-decoration: none;
    transition: var(--transition-fast);
  }
  
  .qr-link::after {
    content: '';
    @apply absolute -bottom-1 left-0 w-full h-0.5 bg-primary origin-left scale-x-0;
    transition: transform 0.3s ease;
  }
  
  .qr-link:hover::after {
    @apply scale-x-100;
  }
  
  .qr-link:focus-visible {
    @apply outline-none ring-2 ring-primary/50 ring-offset-2 rounded-sm;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
  }
}

/* Simplified Keyframes */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes elegant-wink {
  0% { 
    opacity: 1; 
    transform: scale(1);
  }
  12% { 
    opacity: 1; 
    transform: scale(1);
  }
  75% { 
    opacity: 1; 
    transform: scale(1.05);
  }
  81% { 
    opacity: 1; 
    transform: scale(1.05);
  }
  94% { 
    opacity: 1; 
    transform: scale(1);
  }
  100% { 
    opacity: 1; 
    transform: scale(1);
  }
}

@keyframes glow-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes glow-border-smooth {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-glow-border {
  animation: glow-border 3s linear infinite;
}

.animate-glow-border-smooth {
  animation: glow-border-smooth 3s ease-in-out infinite;
}

@keyframes subtle-blue-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 hsl(45 100% 50% / 0);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 8px 2px hsl(45 100% 50% / 0.4);
    opacity: 1;
  }
}

.animate-subtle-blue-pulse {
  animation: subtle-blue-pulse 1.2s ease-in-out infinite;
}

@keyframes icon-blue-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px hsl(var(--brand-blue) / 0));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 6px hsl(var(--brand-blue) / 0.6));
  }
}

.animate-icon-blue-pulse {
  animation: icon-blue-pulse 1.2s ease-in-out infinite;
}

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

.animate-slide-down {
  animation: slide-down 0.4s ease-out;
}

/* Landing Page Enhancements */

/* Neon blinking text effect - Pink */
.neon-text-pink {
  color: #9ca3af;
  text-shadow: 
    0 0 5px rgba(236, 72, 153, 0.5),
    0 0 10px rgba(236, 72, 153, 0.3),
    0 0 15px rgba(236, 72, 153, 0.2);
  animation: neon-pulse-pink 2s ease-in-out infinite;
}

.neon-heart {
  color: #ec4899;
  text-shadow: 
    0 0 5px rgba(236, 72, 153, 0.8),
    0 0 10px rgba(236, 72, 153, 0.6),
    0 0 15px rgba(236, 72, 153, 0.4),
    0 0 20px rgba(236, 72, 153, 0.2);
  animation: neon-heart-pulse 1.5s ease-in-out infinite;
}

@keyframes neon-pulse-pink {
  0%, 100% {
    opacity: 0.7;
    text-shadow: 
      0 0 5px rgba(236, 72, 153, 0.5),
      0 0 10px rgba(236, 72, 153, 0.3),
      0 0 15px rgba(236, 72, 153, 0.2);
  }
  50% {
    opacity: 1;
    text-shadow: 
      0 0 10px rgba(236, 72, 153, 0.8),
      0 0 20px rgba(236, 72, 153, 0.6),
      0 0 30px rgba(236, 72, 153, 0.4),
      0 0 40px rgba(236, 72, 153, 0.2);
  }
}

@keyframes neon-heart-pulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
    text-shadow: 
      0 0 5px rgba(236, 72, 153, 0.8),
      0 0 10px rgba(236, 72, 153, 0.6),
      0 0 15px rgba(236, 72, 153, 0.4);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    text-shadow: 
      0 0 10px rgba(236, 72, 153, 1),
      0 0 20px rgba(236, 72, 153, 0.8),
      0 0 30px rgba(236, 72, 153, 0.6),
      0 0 40px rgba(236, 72, 153, 0.4);
  }
}

/* Animated gradient background */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
}

/* Liquid gradient animation for text */
@keyframes liquid-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.liquid-gradient-text {
  background: linear-gradient(
    90deg,
    #0BA6DF 0%,
    #38bdf8 25%,
    #0BA6DF 50%,
    #38bdf8 75%,
    #0BA6DF 100%
  );
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: liquid-gradient 8s ease infinite;
  filter: drop-shadow(0 0 4px rgba(11, 166, 223, 0.2)) 
          drop-shadow(0 0 6px rgba(11, 166, 223, 0.15));
}

/* Subtle pulse animation for feature card icons */
@keyframes subtle-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}

.icon-container {
  animation: subtle-pulse 4s ease-in-out infinite;
}

/* Liquid gradient background for buttons - Glass effect */
.liquid-gradient-bg {
  background: linear-gradient(
    90deg,
    hsl(196 91% 46% / 0.4) 0%,
    hsl(196 91% 46% / 0.4) 25%,
    hsl(196 91% 52% / 0.4) 50%,
    hsl(196 91% 46% / 0.4) 75%,
    hsl(196 91% 46% / 0.4) 100%
  );
  background-size: 200% 200%;
  animation: liquid-gradient 8s ease infinite;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Shimmer wave effect for buttons */
.button-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer-wave 4s infinite;
}

/* More transparent variant for background preset container */
.liquid-gradient-bg-transparent {
  background: linear-gradient(
    90deg,
    hsl(196 91% 46% / 0.15) 0%,
    hsl(196 91% 46% / 0.15) 25%,
    hsl(196 91% 52% / 0.15) 50%,
    hsl(196 91% 46% / 0.15) 75%,
    hsl(196 91% 46% / 0.15) 100%
  );
  background-size: 200% 200%;
  animation: liquid-gradient 8s ease infinite;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Geometric shape clip paths for floating shapes */
.clip-path-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.clip-path-hexagon {
  clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
}

/* Hero text glow effects */
.hero-text-glow {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hero-text-glow-blue {
  text-shadow: 
    0 2px 10px hsl(196 91% 46% / 0.3),
    0 4px 20px hsl(196 91% 46% / 0.2);
}

.hero-text-glow-purple {
  text-shadow: 
    0 2px 10px rgba(147, 51, 234, 0.3),
    0 4px 20px rgba(147, 51, 234, 0.2);
}

/* Button glow effect */
.button-glow {
  box-shadow: 
    0 4px 15px hsl(196 91% 46% / 0.3),
    0 0 20px hsl(196 91% 46% / 0.1);
}

.button-glow:hover {
  box-shadow: 
    0 6px 20px hsl(196 91% 46% / 0.4),
    0 0 30px hsl(196 91% 46% / 0.2);
}

/* Login card glow effect */
.login-card-glow {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-card-glow:hover {
  border-color: hsl(var(--brand-blue));
  box-shadow: 
    0 0 0 2px hsl(var(--brand-blue) / 0.2),
    0 4px 20px hsl(var(--brand-blue) / 0.3),
    0 0 40px hsl(var(--brand-blue) / 0.15);
}

/* Feature card enhancements */
.feature-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  border-color: currentColor;
}

.icon-container {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CTA card enhancement */
.cta-card {
  position: relative;
  transition: all 0.3s ease;
}

.cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Fade in animation */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out;
}

/* 3D Block Loading Animation */
@keyframes block-bounce {
  0%, 100% {
    transform: perspective(100px) rotateX(45deg) translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: perspective(100px) rotateX(45deg) translateY(-12px) scale(1.1);
    opacity: 0.8;
  }
}

/* Slow Pulsing Blue Border */
@keyframes pulse-blue-border {
  0%, 100% {
    box-shadow: 0 0 0 0 hsl(var(--brand-blue) / 0.4), 0 0 0 0 hsl(var(--brand-blue) / 0.4);
    border-color: hsl(var(--brand-blue) / 0.3);
  }
  50% {
    box-shadow: 0 0 0 4px hsl(var(--brand-blue) / 0.2), 0 0 0 8px hsl(var(--brand-blue) / 0.1);
    border-color: hsl(var(--brand-blue) / 0.6);
  }
}

.pulsing-blue-border {
  animation: pulse-blue-border 1.5s ease-in-out infinite;
  border-color: hsl(var(--brand-blue) / 0.4);
}

.pulsing-blue-text {
  color: rgb(234, 88, 12); /* Orange-600 base - static */
}

/* Enhanced focus states for accessibility */
.premium-experience-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Online Status Indicator - Green Dot with Pulse */
/* Background Gradient Animation keyframes */
@keyframes first {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes second {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes third {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fourth {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fifth {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animate-first {
  animation: first 20s linear infinite;
}

.animate-second {
  animation: second 25s linear infinite;
}

.animate-third {
  animation: third 30s linear infinite;
}

.animate-fourth {
  animation: fourth 15s linear infinite;
}

.animate-fifth {
  animation: fifth 35s linear infinite;
}

@keyframes online-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
    box-shadow: 0 0 0 2.67px rgba(34, 197, 94, 0.4);
  }
}

.online-indicator-dot {
  width: 5.33px;
  height: 5.33px;
  background-color: #22c55e;
  border-radius: 50%;
  display: inline-block;
  animation: online-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
}

/* Sonner toast positioning - bottom center, full width */
[data-sonner-toaster] {
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

[data-sonner-toaster] [data-sonner-toast] {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  justify-content: center !important;
}

[data-sonner-toaster] [data-sonner-toast] > div {
  text-align: center !important;
  width: 100% !important;
}

/* Admin-app style toasts - applied to toasts with toast-admin-style className */
[data-radix-toast-viewport] {
  position: relative;
}

/* Override viewport positioning for admin-style toasts */
.toast-admin-style-viewport {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 100 !important;
  display: flex !important;
  max-height: 100vh !important;
  width: auto !important;
  flex-direction: column-reverse !important;
  padding: 1rem 1rem 1rem 1rem !important;
  padding-right: 0 !important;
}

@media (min-width: 640px) {
  .toast-admin-style-viewport {
    flex-direction: column !important;
  }
}

@media (min-width: 768px) {
  .toast-admin-style-viewport {
    max-width: 350px !important;
  }
}

/* Admin-style toast appearance */
.toast-admin-style {
  border-radius: 0.375rem !important;
  border: 1px solid hsl(var(--border)) !important;
  padding: 1.5rem !important;
  padding-right: 2rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  justify-content: space-between !important;
  align-items: center !important;
  animation: slide-in-from-right !important;
}

.toast-admin-style[data-state="open"] {
  animation: slide-in-from-right 0.3s ease-out !important;
}

.toast-admin-style[data-state="closed"] {
  animation: slide-out-to-right 0.3s ease-in !important;
}

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

@keyframes slide-out-to-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Hide scrollbar for suggestion buttons */
.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Custom scrollbar for resume preview */
.resume-preview-scroll {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #cbd5e1 #f8fafc; /* thumb and track */
}

.resume-preview-scroll::-webkit-scrollbar {
  width: 8px; /* Chrome, Safari, Opera */
}

.resume-preview-scroll::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 4px;
}

.resume-preview-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
  border: 2px solid #f8fafc;
}

.resume-preview-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Spring animation for countdown numbers */
@keyframes checkmark-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6)) drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
    opacity: 1;
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.9)) drop-shadow(0 0 16px rgba(34, 197, 94, 0.7)) drop-shadow(0 0 24px rgba(34, 197, 94, 0.5));
    opacity: 0.95;
  }
}

@keyframes question-mark-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.6)) drop-shadow(0 0 8px rgba(234, 179, 8, 0.4));
    opacity: 1;
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.9)) drop-shadow(0 0 16px rgba(234, 179, 8, 0.7)) drop-shadow(0 0 24px rgba(234, 179, 8, 0.5));
    opacity: 0.95;
  }
}

@keyframes spring {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================================
   PDF STUDIO - SEPARATE LIGHT/DARK PRESETS
   Completely isolated theme presets for foolproof switching
   ============================================ */

/* PDF Studio Header */
.pdf-studio-bg-header-light {
  background-color: white;
}

.pdf-studio-bg-header-dark {
  background-color: hsl(var(--dashboard-background-dark));
}

.pdf-studio-text-header-light {
  color: rgb(107 114 128); /* gray-500 */
}

.pdf-studio-text-header-dark {
  color: rgb(156 163 175); /* gray-400 */
}

.pdf-studio-text-header-title-light {
  color: rgb(17 24 39); /* gray-900 */
}

.pdf-studio-text-header-title-dark {
  color: rgb(243 244 246); /* gray-100 */
}

/* PDF Studio Sidebar */
.pdf-studio-bg-sidebar-light {
  background-color: white;
}

.pdf-studio-bg-sidebar-dark {
  background-color: hsl(var(--dashboard-background-dark));
}

/* PDF Studio Main Background */
.pdf-studio-bg-main-light {
  background-color: white;
}

.pdf-studio-bg-main-dark {
  background-color: hsl(var(--dashboard-background-dark));
}

.pdf-studio-bg-main-live-light {
  background-color: white;
}

.pdf-studio-bg-main-live-dark {
  background-color: rgb(30 41 59); /* slate-800 */
}

/* PDF Studio Buttons */
.pdf-studio-button-light {
  background-color: transparent !important;
  color: rgb(17 24 39) !important; /* gray-900 */
  border-color: rgb(209 213 219) !important; /* gray-300 */
}

.pdf-studio-button-light:hover {
  background-color: rgb(11, 166, 223) !important; /* brand-blue #0BA6DF */
  color: black !important;
}

.pdf-studio-button-light:hover svg,
.pdf-studio-button-light:hover [class*="icon"] {
  color: black !important;
}

.pdf-studio-button-dark {
  background-color: transparent !important;
  color: white !important;
  border-color: rgb(75 85 99) !important; /* gray-600 */
}

.pdf-studio-button-dark:hover {
  background-color: rgb(11, 166, 223) !important; /* brand-blue #0BA6DF */
  color: black !important;
}

.pdf-studio-button-dark:hover svg,
.pdf-studio-button-dark:hover [class*="icon"] {
  color: black !important;
}

/* PDF Studio Skills Add Button */
.pdf-studio-button-skills-add-light {
  background-color: transparent !important;
  color: black !important;
  border: none !important;
}

.pdf-studio-button-skills-add-light:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.pdf-studio-button-skills-add-dark {
  background-color: transparent !important;
  color: white !important;
  border: none !important;
}

.pdf-studio-button-skills-add-dark:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* PDF Studio Education Add Button */
.pdf-studio-button-education-add-light {
  background-color: transparent !important;
  color: rgb(17 24 39) !important; /* gray-900 */
  border: none !important;
}

.pdf-studio-button-education-add-light:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.pdf-studio-button-education-add-dark {
  background-color: transparent !important;
  color: white !important;
  border: none !important;
}

.pdf-studio-button-education-add-dark:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* PDF Studio Experience Add Role Button */
.pdf-studio-button-experience-add-light {
  background-color: transparent !important;
  color: rgb(17 24 39) !important; /* gray-900 */
  border: none !important;
}

.pdf-studio-button-experience-add-light:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.pdf-studio-button-experience-add-dark {
  background-color: transparent !important;
  color: white !important;
  border: none !important;
}

.pdf-studio-button-experience-add-dark:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* PDF Studio Text Empty States */
.pdf-studio-text-empty-light {
  color: rgb(107 114 128); /* gray-500 */
}

.pdf-studio-text-empty-dark {
  color: rgb(209 213 219); /* gray-300 */
}

.pdf-studio-text-empty-secondary-light {
  color: rgb(156 163 175); /* gray-400 */
}

.pdf-studio-text-empty-secondary-dark {
  color: rgb(156 163 175); /* gray-400 */
}

/* PDF Preview Text Colors */
.pdf-preview-text-light {
  color: rgb(17 24 39); /* gray-900 */
}

.pdf-preview-text-dark {
  color: white;
}

.pdf-preview-text-secondary-light {
  color: rgb(107 114 128); /* gray-500 */
}

.pdf-preview-text-secondary-dark {
  color: rgb(209 213 219); /* gray-300 */
}

/* PDF Preview Borders */
.pdf-preview-border-light {
  border-color: rgb(17 24 39); /* gray-900 */
}

.pdf-preview-border-dark {
  border-color: white;
}

/* PDF Preview Container Background */
.pdf-preview-bg-container-light {
  background-color: white;
}

.pdf-preview-bg-container-dark {
  background-color: hsl(var(--dashboard-background-dark));
}

/* PDF Preview Hover - only on hover */
.pdf-preview-hover-light:hover {
  background-color: rgba(59, 130, 246, 0.05) !important; /* brand-blue-light - more transparent */
  color: rgb(30, 58, 138) !important; /* darker navy blue */
}

.pdf-preview-hover-light:hover * {
  color: rgb(30, 58, 138) !important; /* darker navy blue for all child elements */
}

.pdf-preview-hover-dark:hover {
  background-color: rgba(59, 130, 246, 0.2); /* brand-blue-light/20 */
}

/* PDF Preview Active/Editing State - always visible when editing */
.pdf-preview-active-light {
  background-color: rgba(59, 130, 246, 0.05) !important; /* brand-blue-light - more transparent */
  color: rgb(30, 58, 138) !important; /* darker navy blue */
}

.pdf-preview-active-light * {
  color: rgb(30, 58, 138) !important; /* darker navy blue for all child elements */
}

.pdf-preview-active-dark {
  background-color: rgba(59, 130, 246, 0.2); /* brand-blue-light/20 */
}

/* ATS Guide Panel Blue Boxes - Light Mode */
html:not(.dark):not([data-theme="dark"]) .bg-brand-blue-light {
  background-color: rgba(147, 197, 253, 0.3) !important; /* lighter blue, more transparent (30% opacity) */
}

html:not(.dark):not([data-theme="dark"]) .bg-brand-blue-light *,
html:not(.dark):not([data-theme="dark"]) .bg-brand-blue-light h3,
html:not(.dark):not([data-theme="dark"]) .bg-brand-blue-light p,
html:not(.dark):not([data-theme="dark"]) .bg-brand-blue-light li,
html:not(.dark):not([data-theme="dark"]) .bg-brand-blue-light strong,
html:not(.dark):not([data-theme="dark"]) .bg-brand-blue-light ul,
html:not(.dark):not([data-theme="dark"]) .bg-brand-blue-light code {
  color: rgb(30, 58, 138) !important; /* darker navy blue for all text */
}

/* ATS Guide Panel Blue Boxes - Dark Mode (preserve original) */
html.dark .bg-brand-blue-light\/20,
html[data-theme="dark"] .bg-brand-blue-light\/20 {
  background-color: hsl(var(--brand-blue-light) / 0.2) !important; /* original dark mode background */
}

html.dark .bg-brand-blue-light\/20 *,
html.dark .bg-brand-blue-light\/20 h3,
html.dark .bg-brand-blue-light\/20 p,
html.dark .bg-brand-blue-light\/20 li,
html.dark .bg-brand-blue-light\/20 strong,
html.dark .bg-brand-blue-light\/20 ul,
html.dark .bg-brand-blue-light\/20 code,
html[data-theme="dark"] .bg-brand-blue-light\/20 *,
html[data-theme="dark"] .bg-brand-blue-light\/20 h3,
html[data-theme="dark"] .bg-brand-blue-light\/20 p,
html[data-theme="dark"] .bg-brand-blue-light\/20 li,
html[data-theme="dark"] .bg-brand-blue-light\/20 strong,
html[data-theme="dark"] .bg-brand-blue-light\/20 ul,
html[data-theme="dark"] .bg-brand-blue-light\/20 code {
  color: hsl(var(--brand-blue-text)) !important; /* original dark mode text color */
}

/* PDF Editor Cards */
.pdf-editor-card-light {
  background-color: white;
}

.pdf-editor-card-dark {
  background-color: hsl(var(--dashboard-background-dark));
}

/* Light gradient shadow on document preview in dark mode */
.pdf-preview-bg-container-dark .pdf-editor-card-dark {
  box-shadow: 
    -20px 0 40px -10px rgba(255, 255, 255, 0.1),
    20px 0 40px -10px rgba(255, 255, 255, 0.1),
    0 20px 40px -10px rgba(255, 255, 255, 0.1);
}

/* Shadow on document preview in light mode - creates lifted effect */
.pdf-preview-bg-container-light .pdf-editor-card-light {
  box-shadow: 
    -20px 0 40px -10px rgba(0, 0, 0, 0.15),
    20px 0 40px -10px rgba(0, 0, 0, 0.15),
    0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

/* PDF Editor Card Hover */
.pdf-editor-card-hover-light:hover {
  background-color: rgb(249 250 251) !important; /* gray-50 */
}

.pdf-editor-card-hover-dark:hover {
  background-color: rgb(30 41 59) !important; /* slate-800 */
}

/* PDF Editor Labels */
.pdf-editor-label-light {
  color: rgb(55 65 81); /* gray-700 */
}

.pdf-editor-label-dark {
  color: rgb(209 213 219); /* gray-300 */
}

.pdf-editor-label-secondary-light {
  color: rgb(107 114 128); /* gray-500 */
}

.pdf-editor-label-secondary-dark {
  color: rgb(156 163 175); /* gray-400 */
}

/* PDF Editor Inputs */
.pdf-editor-input-light {
  background-color: white !important;
  color: rgb(17 24 39) !important; /* gray-900 */
  border-color: rgb(209 213 219) !important; /* gray-300 */
}

.pdf-editor-input-light::placeholder {
  color: rgb(156 163 175) !important; /* gray-400 */
}

.pdf-editor-input-dark {
  background-color: rgb(31 41 55) !important; /* gray-800 - dark grey */
  color: white !important;
  border-color: rgb(75 85 99) !important; /* gray-600 */
}

/* Empty fields in dark theme - slight yellow background */
.pdf-editor-input-dark:placeholder-shown {
  background-color: rgba(234, 179, 8, 0.15) !important; /* yellow-500 with 15% opacity */
}

.pdf-editor-input-dark:not(:placeholder-shown) {
  background-color: rgb(31 41 55) !important; /* gray-800 - normal dark grey when filled */
}

.pdf-editor-input-dark::placeholder {
  color: rgb(156 163 175); /* gray-400 */
}

/* PDF Editor Input Warning State - Light Mode */
.pdf-editor-input-warning-light {
  border-color: rgb(234, 179, 8) !important; /* yellow-500 border */
  background-color: rgba(254, 243, 199, 0.8) !important; /* yellow-100 with opacity - light yellow background */
}

/* Empty warning fields in light theme - slightly more yellow */
.pdf-editor-input-warning-light:placeholder-shown {
  background-color: rgba(254, 243, 199, 0.9) !important; /* yellow-100 with more opacity when empty */
  border-color: rgb(234, 179, 8) !important; /* yellow-500 border */
}

/* Filled warning fields in light theme - still yellow (same as empty) */
.pdf-editor-input-warning-light:not(:placeholder-shown) {
  background-color: rgba(254, 243, 199, 0.8) !important; /* yellow-100 with opacity - same yellow when filled */
  border-color: rgb(234, 179, 8) !important; /* yellow-500 border */
}

.pdf-editor-input-warning-dark {
  border-color: rgba(59, 130, 246, 0.7) !important; /* brand-blue with opacity */
  background-color: rgb(31 41 55) !important; /* gray-800 - dark grey base */
}

/* Empty warning fields in dark theme - slight yellow background */
.pdf-editor-input-warning-dark:placeholder-shown {
  background-color: rgba(234, 179, 8, 0.15) !important; /* yellow-500 with 15% opacity */
}

.pdf-editor-input-warning-dark:not(:placeholder-shown) {
  background-color: rgb(31 41 55) !important; /* gray-800 - normal dark grey when filled */
}

/* PDF Studio Select Components */
.pdf-studio-select-light {
  background-color: white;
  color: rgb(17 24 39); /* gray-900 */
  border-color: rgb(209 213 219); /* gray-300 */
}

.pdf-studio-select-dark {
  background-color: transparent !important;
  color: white;
  border-color: rgb(75 85 99); /* gray-600 */
}

.pdf-studio-select-light:hover {
  background-color: rgb(11, 166, 223) !important; /* brand-blue #0BA6DF */
  color: black !important;
  border-color: rgb(11, 166, 223) !important; /* brand-blue #0BA6DF */
}

.pdf-studio-select-dark:hover {
  background-color: rgb(11, 166, 223) !important; /* brand-blue #0BA6DF */
  color: black !important;
  border-color: rgb(11, 166, 223) !important; /* brand-blue #0BA6DF */
}

.pdf-studio-select-content-light {
  background-color: white;
  color: rgb(17 24 39); /* gray-900 */
  border-color: rgb(209 213 219); /* gray-300 */
}

.pdf-studio-select-content-dark {
  background-color: rgb(31 41 55); /* gray-800 */
  color: white;
  border-color: rgb(75 85 99); /* gray-600 */
}

.pdf-studio-select-item-light {
  color: rgb(17 24 39); /* gray-900 */
}

.pdf-studio-select-item-dark {
  color: white;
}

.pdf-studio-select-item-light:hover,
.pdf-studio-select-item-light[data-highlighted] {
  background-color: rgb(249 250 251); /* gray-50 */
  color: rgb(17 24 39); /* gray-900 */
}

.pdf-studio-select-item-dark:hover,
.pdf-studio-select-item-dark[data-highlighted] {
  background-color: rgb(55 65 81); /* gray-700 */
  color: white;
}

/* PDF Studio Icons */
.pdf-studio-icon-light {
  color: rgb(107 114 128); /* gray-500 */
}

.pdf-studio-icon-dark {
  color: rgb(209 213 219); /* gray-300 */
}

.pdf-studio-button-ghost-light:hover .pdf-studio-icon-light,
.pdf-studio-button-ghost-dark:hover .pdf-studio-icon-dark {
  color: black !important;
}

/* PDF Studio Ghost Buttons */
.pdf-studio-button-ghost-light {
  color: rgb(107 114 128); /* gray-500 */
}

.pdf-studio-button-ghost-light:hover {
  background-color: rgb(11, 166, 223) !important; /* brand-blue #0BA6DF */
  color: black !important;
}

.pdf-studio-button-ghost-light:hover svg,
.pdf-studio-button-ghost-light:hover [class*="icon"] {
  color: black !important;
}

.pdf-studio-button-ghost-dark {
  color: rgb(209 213 219); /* gray-300 */
}

.pdf-studio-button-ghost-dark:hover {
  background-color: rgb(11, 166, 223) !important; /* brand-blue #0BA6DF */
  color: black !important;
}

.pdf-studio-button-ghost-dark:hover svg,
.pdf-studio-button-ghost-dark:hover [class*="icon"] {
  color: black !important;
}

/* PDF Studio Title Input */
.pdf-studio-title-input-light {
  color: rgb(17 24 39); /* gray-900 */
}

.pdf-studio-title-input-dark {
  color: white;
}

.pdf-studio-title-hover-light:hover {
  background-color: rgba(59, 130, 246, 0.1); /* brand-blue-light */
}

.pdf-studio-title-hover-dark:hover {
  background-color: rgba(59, 130, 246, 0.2); /* brand-blue-light/20 */
}

/* PDF Editor Chevron */
.pdf-editor-chevron-light {
  color: rgb(156 163 175); /* gray-400 */
}

.pdf-editor-chevron-dark {
  color: rgb(156 163 175); /* gray-400 */
}

/* PDF Editor Question Mark - glows in both themes */
.pdf-editor-question-mark-light {
  color: rgb(234 179 8); /* yellow-500 */
}

.pdf-editor-question-mark-dark {
  color: rgb(234 179 8); /* yellow-500 */
}

/* PDF Editor Checkmark */
.pdf-editor-checkmark-light {
  color: rgb(34 197 94); /* green-600 */
}

.pdf-editor-checkmark-dark {
  color: rgb(34 197 94); /* green-500 */
}

/* PDF Editor Validation Text Colors */
.pdf-editor-validation-critical-light {
  color: rgb(220 38 38); /* red-700 */
}

.pdf-editor-validation-critical-dark {
  color: rgb(239 68 68); /* red-500 */
}

.pdf-editor-validation-critical-text-light {
  color: rgb(185 28 28); /* red-600 */
}

.pdf-editor-validation-critical-text-dark {
  color: rgb(248 113 113); /* red-400 */
}

.pdf-editor-validation-warning-light {
  color: rgb(161 98 7); /* yellow-700 */
}

.pdf-editor-validation-warning-dark {
  color: rgb(234 179 8); /* yellow-500 */
}

.pdf-editor-validation-warning-text-light {
  color: rgb(161 98 7); /* yellow-600 */
}

.pdf-editor-validation-warning-text-dark {
  color: rgb(250 204 21); /* yellow-400 */
}

.pdf-editor-validation-tip-light {
  color: rgb(37 99 235); /* brand-blue-text */
}

.pdf-editor-validation-tip-dark {
  color: rgb(59 130 246); /* brand-blue */
}

.pdf-editor-validation-tip-text-light {
  color: rgb(37 99 235); /* blue-600 */
}

.pdf-editor-validation-tip-text-dark {
  color: rgb(96 165 250); /* blue-400 */
}

/* PDF Editor Skill Category */
.pdf-editor-skill-category-light {
  border-color: rgb(229 231 235); /* gray-200 */
}

.pdf-editor-skill-category-dark {
  border-color: rgb(75 85 99); /* gray-600 */
}

.pdf-editor-skill-category-default-light {
  background-color: rgb(249 250 251); /* gray-50 */
  border-color: rgb(229 231 235); /* gray-200 */
}

.pdf-editor-skill-category-default-dark {
  background-color: rgb(31 41 55); /* gray-800 */
  border-color: rgb(55 65 81); /* gray-700 */
}

.pdf-editor-skill-category-drag-light {
  background-color: rgba(59, 130, 246, 0.1); /* brand-blue-light */
  border-color: rgb(59 130 246); /* brand-blue */
}

.pdf-editor-skill-category-drag-dark {
  background-color: rgba(59, 130, 246, 0.2); /* brand-blue-light/20 */
  border-color: rgb(59 130 246); /* brand-blue */
}

/* PDF Editor Skill Chip */
.pdf-editor-skill-chip-light {
  background-color: white;
  border-color: rgb(229 231 235); /* gray-200 */
  color: rgb(17 24 39); /* gray-900 */
}

.pdf-editor-skill-chip-dark {
  background-color: rgb(31 41 55); /* gray-800 */
  border-color: rgb(55 65 81); /* gray-700 */
  color: white;
}

.pdf-editor-skill-chip-hover-light:hover {
  background-color: rgb(249 250 251); /* gray-50 */
}

.pdf-editor-skill-chip-hover-dark:hover {
  background-color: rgb(55 65 81); /* gray-700 */
}

.pdf-editor-skill-grip-light {
  color: rgb(156 163 175); /* gray-400 */
}

.pdf-editor-skill-grip-light:hover {
  color: rgb(107 114 128); /* gray-600 */
}

.pdf-editor-skill-grip-dark {
  color: rgb(156 163 175); /* gray-400 */
}

.pdf-editor-skill-grip-dark:hover {
  color: rgb(209 213 219); /* gray-300 */
}

.pdf-editor-skill-remove-light {
  color: rgb(156 163 175); /* gray-400 */
}

.pdf-editor-skill-remove-light:hover {
  color: rgb(220 38 38); /* red-600 */
  background-color: transparent !important;
}

.pdf-editor-skill-remove-dark {
  color: rgb(156 163 175); /* gray-400 */
}

.pdf-editor-skill-remove-dark:hover {
  color: rgb(220 38 38); /* red-600 */
  background-color: transparent !important;
}

/* PDF Editor Card Border */
.pdf-editor-card-border-light {
  border-color: rgb(229 231 235); /* gray-200 */
}

.pdf-editor-card-border-dark {
  border-color: rgb(75 85 99); /* gray-600 */
}

/* PDF Editor Text Critical */
.pdf-editor-text-critical-light {
  color: rgb(17 24 39); /* gray-900 */
}

.pdf-editor-text-critical-dark {
  color: white;
}

/* PDF Editor Text */
.pdf-editor-text-light {
  color: rgb(17 24 39); /* gray-900 */
}

.pdf-editor-text-dark {
  color: white;
}

/* PDF Studio Alert Dialog */
.pdf-studio-alert-dialog-light {
  background-color: white;
  border-color: rgb(229 231 235); /* gray-200 */
}

.pdf-studio-alert-dialog-dark {
  background-color: hsl(var(--dashboard-background-dark));
  border-color: rgb(75 85 99); /* gray-600 */
}

.pdf-studio-alert-title-light {
  color: rgb(17 24 39); /* gray-900 */
}

.pdf-studio-alert-title-dark {
  color: white;
}

.pdf-studio-alert-description-light {
  color: rgb(107 114 128); /* gray-500 */
}

.pdf-studio-alert-description-dark {
  color: rgb(209 213 219); /* gray-300 */
}

/* ============================================
   WORKSHOP BANNER ANIMATIONS
   Shared styles for all workshop banner instances
   ============================================ */

/* Workshop Banner Pulse Animation - 3s cycle with 1s pause */
@keyframes workshop-banner-pulse {
  0% {
    color: #1f2937;
  }
  33.33% {
    color: hsl(196, 91%, 46%);
  }
  66.67% {
    color: #1f2937;
  }
  100% {
    color: #1f2937;
  }
}

@keyframes workshop-banner-pulse-dark {
  0% {
    color: white;
  }
  33.33% {
    color: hsl(196, 91%, 46%);
  }
  66.67% {
    color: white;
  }
  100% {
    color: white;
  }
}

/* Workshop Banner Shimmer Animation - 12s cycle (2x slower movement) */
@keyframes workshop-banner-shimmer {
  0% {
    left: -100%;
  }
  8.33% {
    left: 100%;
  }
  33.33% {
    left: 100%;
  }
  41.67% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
}

/* Workshop Banner - Desktop */
.workshop-banner {
  background: transparent;
  color: #1f2937;
  font-weight: 600;
  padding: 0.35rem 0;
  font-size: 0.75rem;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: all 0.2s ease;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  animation: workshop-banner-pulse 3s ease-in-out infinite;
  border-radius: 9999px;
}

.workshop-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsla(196, 91%, 70%, 0.3), transparent);
  animation: workshop-banner-shimmer 12s infinite;
  border-radius: 9999px;
  pointer-events: none;
}

.dark .workshop-banner {
  color: white;
  animation: workshop-banner-pulse-dark 3s ease-in-out infinite;
}

.workshop-banner:hover,
.workshop-banner:hover * {
  color: hsl(196, 91%, 46%) !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  animation-play-state: paused;
}

.dark .workshop-banner:hover,
.dark .workshop-banner:hover * {
  color: hsl(196, 91%, 46%) !important;
  animation-play-state: paused;
}

/* Mobile Workshop Banner - Very Slim */
.workshop-banner-mobile {
  background: transparent;
  color: #1f2937;
  font-weight: 600;
  padding: 0.25rem 0;
  font-size: 0.75rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  animation: workshop-banner-pulse 3s ease-in-out infinite;
  border-radius: 9999px;
}

.workshop-banner-mobile::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsla(196, 91%, 70%, 0.3), transparent);
  animation: workshop-banner-shimmer 12s infinite;
  border-radius: 9999px;
  pointer-events: none;
}

.dark .workshop-banner-mobile {
  color: white;
  animation: workshop-banner-pulse-dark 3s ease-in-out infinite;
}

.workshop-banner-mobile:hover,
.workshop-banner-mobile:hover * {
  color: hsl(196, 91%, 46%) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  animation-play-state: paused;
}

.dark .workshop-banner-mobile:hover,
.dark .workshop-banner-mobile:hover * {
  color: hsl(196, 91%, 46%) !important;
  animation-play-state: paused;
}