/*
 * 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.
 *


 */

/* Tag selector styles */
.tag-selector {
  .tag-tile {
    @apply inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-lg border cursor-pointer transition-all duration-200;
    @apply bg-white border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400;
    
    &.selected {
      @apply bg-blue-50 border-blue-300 text-blue-700 hover:bg-blue-100 hover:border-blue-400;
    }
    
    &.new-tag {
      @apply bg-green-50 border-green-300 text-green-700 hover:bg-green-100 hover:border-green-400;
    }
    
    /* Hover effect for selected tags */
    &.selected:hover {
      @apply line-through decoration-2 decoration-red-500;
    }
    
    &.new-tag:hover {
      @apply line-through decoration-2 decoration-red-500;
    }
  }
  
  .selected-tag {
    @apply inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-lg border cursor-pointer transition-all duration-200;
    @apply bg-blue-50 border-blue-300 text-blue-700 hover:bg-blue-100 hover:border-blue-400;
    
    &.new-tag {
      @apply bg-green-50 border-green-300 text-green-700 hover:bg-green-100 hover:border-green-400;
    }
    
    /* Hover effect for selected tags */
    &:hover {
      @apply line-through decoration-2 decoration-red-500;
    }
  }
}

/* Attribute input autocomplete styles */
.attribute-input {
  .suggestions {
    @apply max-h-48 overflow-y-auto;
    
    .suggestion-item {
      @apply px-3 py-2 text-sm cursor-pointer transition-colors duration-150;
      @apply text-gray-700 hover:bg-gray-100;
      
      &.selected {
        @apply bg-blue-50 text-blue-700;
      }
      
      &:first-child {
        @apply rounded-t-md;
      }
      
      &:last-child {
        @apply rounded-b-md;
      }
    }
  }
  
  /* Attribute display styles */
  .attribute-item {
    @apply group flex items-center justify-between p-2 bg-white rounded border border-gray-200;
    @apply hover:border-gray-300 transition-colors duration-200;
    
    .attribute-content {
      @apply flex-1 min-w-0;
      
      .attribute-name {
        @apply text-sm font-medium text-gray-900;
      }
      
      .attribute-value {
        @apply text-sm text-gray-600 ml-1 break-words;
      }
    }
    
    .attribute-remove-btn {
      @apply ml-2 p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded;
      @apply transition-colors duration-200 opacity-0 group-hover:opacity-100 focus:opacity-100;
      @apply focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1;
    }
  }
  
  /* Empty state styles */
  .empty-state {
    @apply text-center py-4 text-gray-400;
    
    .empty-icon {
      @apply mx-auto h-6 w-6 mb-1;
    }
    
    .empty-text {
      @apply text-xs;
    }
  }
  
  /* Popular attributes styles */
  .popular-attributes {
    @apply mt-3 pt-3 border-t border-gray-200;
    
    .popular-label {
      @apply text-xs text-gray-500 mb-2;
    }
    
    .popular-list {
      @apply flex flex-wrap gap-1;
      
      .popular-item {
        @apply px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded;
        @apply hover:bg-gray-200 hover:text-gray-800 transition-colors duration-200;
        @apply cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1;
      }
    }
  }
}

/* QR Code styles */
.qr-code {
  display: inline-block;
  text-align: center;
}

.qr-code svg {
  max-width: 100%;
  height: auto;
}

/* Turbo View Transitions — a light cross-fade between page states (enabled via the
   <meta name="view-transition"> tag). The active language pill carries a
   view-transition-name so its highlight slides to the new position instead of jumping. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: ease;
  }
}

/* Respect users who ask for less motion — no fade, no slide, just an instant swap. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}