@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/*
 * 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.
 *


 */

/* Dark mode is enabled via tailwind.config.js darkMode: 'class' */

/* 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;
      }
    }
  }
}

/* Location Selector Styles */
.location-selector {
  .step-card {
    @apply bg-white rounded-lg border border-gray-200 p-4 shadow-sm;
    
    .step-header {
      @apply flex items-center space-x-3 mb-4;
      
      .step-number {
        @apply flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center;
        
        &.step-1 {
          @apply bg-blue-100;
          
          .step-number-text {
            @apply text-sm font-semibold text-blue-600;
          }
        }
        
        &.step-2 {
          @apply bg-green-100;
          
          .step-number-text {
            @apply text-sm font-semibold text-green-600;
          }
        }
        
        &.step-complete {
          @apply bg-gray-100;
          
          .step-icon {
            @apply w-4 h-4 text-gray-600;
          }
        }
      }
      
      .step-content {
        @apply flex-1;
        
        .step-title {
          @apply text-sm font-medium text-gray-900;
        }
        
        .step-description {
          @apply text-xs text-gray-500;
        }
      }
    }
    
    .step-grid {
      @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3;
    }
    
    .location-grid {
      @apply max-w-full overflow-hidden;
      @apply flex flex-col space-y-4;
    }
  }
  
  .location-card, .container-card {
    @apply p-3 text-left border border-gray-200 rounded-lg transition-all duration-300 ease-in-out;
    @apply hover:border-blue-300 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500;
    
    &.selected {
      @apply border-blue-500 bg-blue-50 ring-2 ring-blue-500;
    }
    
    /* Fallback for data attributes */
    &[data-location-level="0"] {
      @apply border-l-4 border-l-blue-500 pl-3;
      
      .card-icon {
        @apply text-blue-500;
      }
    }
    
    &[data-location-level="1"] {
      @apply border-l-4 border-l-green-500 pl-9;
      
      .card-icon {
        @apply text-green-500;
      }
    }
    
    &[data-location-level="2"] {
      @apply border-l-4 border-l-purple-500 pl-15;
      
      .card-icon {
        @apply text-purple-500;
      }
    }
    
    &[data-location-level="3"] {
      @apply border-l-4 border-l-orange-500 pl-21;
      
      .card-icon {
        @apply text-orange-500;
      }
    }
    
    &[data-location-level="4"] {
      @apply border-l-4 border-l-pink-500 pl-24;
      
      .card-icon {
        @apply text-pink-500;
      }
    }
    
    &[data-location-level="5"] {
      @apply border-l-4 border-l-indigo-500 pl-32;
      
      .card-icon {
        @apply text-indigo-500;
      }
    }
    
    /* Fallback for deeper levels */
    &[data-location-level="6"] {
      @apply border-l-4 border-l-gray-500 pl-40;
      
      .card-icon {
        @apply text-gray-500;
      }
    }
    
    &[data-location-level="7"] {
      @apply border-l-4 border-l-yellow-500 pl-48;
      
      .card-icon {
        @apply text-yellow-500;
      }
    }
    
    &[data-location-level="8"] {
      @apply border-l-4 border-l-teal-500 pl-56;
      
      .card-icon {
        @apply text-teal-500;
      }
    }
    
    .card-content {
      @apply flex items-center space-x-2;
      
      .card-icon {
        @apply flex-shrink-0 w-5 h-5 text-gray-400;
      }
      
      .card-text {
        @apply flex-1 min-w-0 overflow-hidden;
        
        .card-title {
          @apply text-sm font-medium text-gray-900 truncate;
        }
        
        .card-subtitle {
          @apply text-xs text-gray-500 truncate;
        }
      }
    }
  }
  
  /* Level-based styling for location cards */
  .location-card.level-0 {
    @apply border-l-4 border-l-blue-500;
  }
  
  .location-card.level-0 .card-icon {
    @apply text-blue-500;
  }
  
  .location-card.level-1 {
    @apply border-l-4 border-l-green-500 ml-4;
  }
  
  .location-card.level-1 .card-icon {
    @apply text-green-500;
  }
  
  .location-card.level-2 {
    @apply border-l-4 border-l-purple-500 ml-8;
  }
  
  .location-card.level-2 .card-icon {
    @apply text-purple-500;
  }
  
  /* Ensure all location cards have proper styling */
  .location-card {
    @apply border border-gray-200 rounded-lg p-3 text-left transition-all duration-200;
  }
  
  .location-card:hover {
    @apply border-blue-300 bg-blue-50;
  }
  
  .location-card:focus {
    @apply outline-none ring-2 ring-blue-500;
  }
  
  /* Reset state - show all levels */
  .location-grid .location-card {
    @apply block;
  }
  
  .container-card {
    @apply hover:border-green-300 hover:bg-green-50 focus:ring-green-500;
    
    &.selected {
      @apply border-green-500 bg-green-50 ring-green-500;
    }
  }
  
  .summary-card {
    @apply bg-gray-50 rounded-lg border border-gray-200 p-4;
    
    .summary-content {
      @apply flex items-center space-x-3;
      
      .summary-icon {
        @apply flex-shrink-0 w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center;
        
        .summary-icon-svg {
          @apply w-4 h-4 text-gray-600;
        }
      }
      
      .summary-text {
        @apply flex-1;
        
        .summary-title {
          @apply text-sm font-medium text-gray-900;
        }
        
        .summary-path {
          @apply text-xs text-gray-500;
        }
      }
      
      .summary-action {
        @apply text-xs text-blue-600 hover:text-blue-800 font-medium cursor-pointer;
      }
    }
  }
  
  .empty-state {
    @apply col-span-full text-center py-8 text-gray-500;
    
    .empty-icon {
      @apply mx-auto h-8 w-8 mb-2;
    }
    
    .empty-text {
      @apply text-sm;
    }
  }
}

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

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