/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * Note: blog.css is imported via Tailwind (application.tailwind.css) to support @apply directives


 */

/* Z-index management moved to z-index.css */
.feature-hints-positioned {
  position: fixed !important;
  top: 80px !important;
  right: 16px !important;
  width: 320px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  pointer-events: none !important;
  background: transparent !important;
}

.pointer-events-auto {
  pointer-events: auto !important;
}

.tooltip-positioned {
  position: absolute !important;
}

.progress-step-1 {
  width: 33.33% !important;
}

/* Feature Discovery Styles */
.feature-highlight {
  position: relative;
  animation: featureGlow 2s ease-in-out infinite alternate;
}

.feature-highlight::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4);
  border-radius: inherit;
  z-index: -1;
  opacity: 0.3;
  animation: featureShimmer 3s ease-in-out infinite;
}

.feature-pulse {
  animation: featurePulse 2s ease-in-out infinite;
}

@keyframes featureGlow {
  0% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  }
}

@keyframes featureShimmer {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes featurePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.feature-hint {
  backdrop-filter: blur(10px);
}

.feature-tooltip {
  backdrop-filter: blur(10px);
}

/* CRITICAL: Maximum priority hints positioning - TOP RIGHT CORNER */
body .feature-hints-container,
html body .feature-hints-container,
body [data-feature-discovery-target="hintsContainer"],
html body [data-feature-discovery-target="hintsContainer"] {
  position: fixed !important;
  top: 80px !important;
  right: 16px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 60 !important;
  width: 320px !important;
  max-width: 320px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  pointer-events: none !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body .feature-hints-container .feature-hint,
html body .feature-hints-container .feature-hint,
body [data-feature-discovery-target="hintsContainer"] .feature-hint,
html body [data-feature-discovery-target="hintsContainer"] .feature-hint {
  pointer-events: auto !important;
  position: relative !important;
  display: block !important;
  margin-bottom: 1rem !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Override any bottom positioning forcefully */
body .feature-hints-container:not([style*="top: 80px"]) {
  top: 80px !important;
  bottom: auto !important;
}

/* Mobile adjustments only for small screens */
@media (max-width: 640px) {
  .feature-progress {
    display: none;
  }

  body .feature-hints-container,
  html body .feature-hints-container,
  body [data-feature-discovery-target="hintsContainer"],
  html body [data-feature-discovery-target="hintsContainer"] {
    width: calc(100vw - 2rem) !important;
    right: 1rem !important;
    left: 1rem !important;
    top: auto !important;
    bottom: 6rem !important;
    max-height: 40vh !important;
    z-index: 60 !important;
  }

  .feature-highlight::after {
    display: none;
  }

  .feature-pulse {
    animation: none;
  }
}

/* For tablets and desktop, ensure proper positioning */
@media (min-width: 641px) {
  body .feature-hints-container,
  html body .feature-hints-container,
  body [data-feature-discovery-target="hintsContainer"],
  html body [data-feature-discovery-target="hintsContainer"] {
    top: 80px !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 60 !important;
  }
}

/* File upload styles */
/* Hide the file input text */
input[type="file"]::-webkit-file-upload-button {
  visibility: hidden;
}

/* Hide the "No file chosen" text in Firefox */
input[type="file"] {
  color: transparent;
}
/* Z-index organization */
:root {
  --z-header: 40; /* Base header level */
  --z-dropdown: 50; /* Dropdowns above header */
  --z-popup: 60; /* Popups above dropdowns */
  --z-modal: 70; /* Modals above popups */
  --z-tooltip: 80; /* Tooltips above modals */
  --z-flash: 90; /* Flash messages above everything */
}

/* Header */
header.sticky {
  z-index: var(--z-header) !important;
}

/* Dropdown menus */
.dropdown-menu-high-z {
  z-index: var(--z-dropdown) !important;
}

/* Popups and notifications */
.feature-hints-container,
[data-feature-discovery-target="hintsContainer"] {
  z-index: var(--z-popup) !important;
}

/* Modals */
.modal {
  z-index: var(--z-modal) !important;
}

/* Tooltips */
.tooltip {
  z-index: var(--z-tooltip) !important;
}

/* Flash messages */
.flash {
  z-index: var(--z-flash) !important;
}