/* Light Theme */
 body {
  --autocomplete-plus-text-color-cat-general: var(--p-blue-600);
  --autocomplete-plus-text-color-cat-artist: var(--p-red-600);
  --autocomplete-plus-text-color-cat-copyright: var(--p-purple-600);
  --autocomplete-plus-text-color-cat-character: var(--p-green-600);
  --autocomplete-plus-text-color-cat-meta: var(--p-yellow-600);
  --autocomplete-plus-text-color-cat-unknown: var(--p-grey-600);

  /* Selected color */
  --autocomplete-plus-text-color-cat-general-selected: var(--p-blue-200);
  --autocomplete-plus-text-color-cat-artist-selected: var(--p-red-200);
  --autocomplete-plus-text-color-cat-copyright-selected: var(--p-purple-200);
  --autocomplete-plus-text-color-cat-character-selected: var(--p-green-200);
  --autocomplete-plus-text-color-cat-meta-selected: var(--p-yellow-200);
  --autocomplete-plus-text-color-cat-unknown-selected: var(--p-grey-200);
}

/* Dark Theme */
body.dark-theme {
  --autocomplete-plus-text-color-cat-general: var(--p-blue-400);
  --autocomplete-plus-text-color-cat-artist: var(--p-red-400);
  --autocomplete-plus-text-color-cat-copyright: var(--p-purple-400);
  --autocomplete-plus-text-color-cat-character: var(--p-green-400);
  --autocomplete-plus-text-color-cat-meta: var(--p-yellow-400);
  --autocomplete-plus-text-color-cat-unknown: var(--p-grey-400);

  /* Selected color */
  --autocomplete-plus-text-color-cat-general-selected: var(--p-blue-200);
  --autocomplete-plus-text-color-cat-artist-selected: var(--p-red-200);
  --autocomplete-plus-text-color-cat-copyright-selected: var(--p-purple-200);
  --autocomplete-plus-text-color-cat-character-selected: var(--p-green-200);
  --autocomplete-plus-text-color-cat-meta-selected: var(--p-yellow-200);
  --autocomplete-plus-text-color-cat-unknown-selected: var(--p-grey-200);
}

#autocomplete-plus-list {
  position: absolute;
  z-index: 999;
  min-width: 200px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--comfy-input-bg);
  box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
  color: var(--input-text);
  font-size: 0.9em;
  overflow-y: auto;
}

.autocomplete-plus-item {
  overflow: hidden;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocomplete-plus-item[data-tag-category="general"] {
  color: var(--autocomplete-plus-text-color-cat-general);
}

.autocomplete-plus-item[data-tag-category="artist"] {
  color: var(--autocomplete-plus-text-color-cat-artist);
}

.autocomplete-plus-item[data-tag-category="copyright"] {
  color: var(--autocomplete-plus-text-color-cat-copyright);
}

.autocomplete-plus-item[data-tag-category="character"] {
  color: var(--autocomplete-plus-text-color-cat-character);
}

.autocomplete-plus-item[data-tag-category="meta"] {
  color: var(--autocomplete-plus-text-color-cat-meta);
}

.autocomplete-plus-item[data-tag-category="unknown"] {
  color: var(--autocomplete-plus-text-color-cat-unknown);
}

.autocomplete-plus-item:last-child {
  border-bottom: none;
}

/* Alternating row colors */
.autocomplete-plus-item:nth-child(even) {
  background-color: var(--comfy-menu-bg);
}

.autocomplete-plus-item:nth-child(odd) {
  background-color: var(--comfy-menu-secondary-bg);
}

/* Hover effect */
.autocomplete-plus-item:hover {
  background-color: var(--comfy-hover-bg);
}

/* Selected item style */
.autocomplete-plus-item.selected {
  background-color: var(
    --comfy-menu-bg-selected,
    var(--comfy-button-bg)
  );
  font-weight: bold;
}

.autocomplete-plus-item .autocomplete-plus-alias {
  overflow: hidden;
  color: var(--descrip-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Related Tags UI Styles */
#related-tags-container {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  display: none;
  width: fit-content;
  background-color: var(--comfy-input-bg);
  color: var(--input-text);
}

#related-tags-header {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--comfy-menu-bg);
  color: var(--descrip-text);
}

.related-tags-header-tag-name {
  font-weight: bold;
}

#related-tags-list {
  display: grid;
  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
  grid-auto-rows: auto;
  grid-template-columns: max-content 1fr auto auto;
  overflow-y: auto;
}

.related-tag-item {
  display: grid;
  cursor: pointer;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.related-tag-item[data-tag-category="general"] {
  color: var(--autocomplete-plus-text-color-cat-general);
}

.related-tag-item[data-tag-category="artist"] {
  color: var(--autocomplete-plus-text-color-cat-artist);
}

.related-tag-item[data-tag-category="copyright"] {
  color: var(--autocomplete-plus-text-color-cat-copyright);
}

.related-tag-item[data-tag-category="character"] {
  color: var(--autocomplete-plus-text-color-cat-character);
}

.related-tag-item[data-tag-category="meta"] {
  color: var(--autocomplete-plus-text-color-cat-meta);
}

.related-tag-item[data-tag-category="unknown"] {
  color: var(--autocomplete-plus-text-color-cat-unknown);
}

.related-tag-item span {
  align-content: center;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-color);
}

.related-tag-item:nth-child(even) span {
  background-color: var(--comfy-menu-bg);
}

.related-tag-item:nth-child(odd) span {
  background-color: var(--comfy-menu-secondary-bg);
}

.related-tag-item:hover span {
  background-color: var(--p-form-field-filled-hover-background);
}

.related-tag-item.selected span {
  background-color: var(
    --comfy-menu-bg-selected,
    var(--comfy-button-bg)
  );
  font-weight: bold;
}

.related-tag-name {
  padding: 8px;
  white-space: nowrap;
}

.related-tag-alias {
  overflow: hidden;
  color: var(--descrip-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-tag-similarity {
  color: var(--descrip-text);
  text-align: right;
  white-space: nowrap;
}

.related-tags-loading-message {
  padding: 12px;
  font-style: italic;
  text-align: center;
}

.related-tags-empty {
  padding: 12px;
  color: var(--error-text);
  font-style: italic;
  text-align: center;
}