/* ========================================
   TAGIFY COMPONENTS
   ======================================== */

.tagify-search-container {
  flex-grow: 1;
  cursor: pointer;
}

.tagify-search-container .tagify {
  --tag-hide-transition: 0s;
  border: 1px solid #ccc;
  padding: 0px;
  /* min-height: 40px; */
  width: 100%;
  background-color: white;
  border-radius: 5px;
  box-shadow: inset 0px 0px 5px #eee;
}

.tagify-search-container .tagify:hover {
  /* border-color: var(--color-focus); */
}

.tagify-search-container .tagify.tagify--focus {
  /* border-color: var(--color-focus); */
  /* box-shadow: 0 0 0 2px var(--color-focus-shadow); */
}

.tagify__tag {
  /* margin-inline: var(--spacing-xs) var(--spacing-sm) !important;
  margin-block: var(--spacing-xs) !important;
  padding-right: var(--spacing-2xs) !important; */

  cursor: pointer;
  border-radius: 3px;
}

/* Style for included tags (green background) */
.tagify-search-container .tagify__tag.included-tag {
  background: var(--color-tag-included) !important;
}

.tagify-search-container .tagify__tag.included-tag .tagify__tag-text {
  color: #fff !important;
}

/* Style for excluded tags (red background) */
.tagify-search-container .tagify__tag.excluded-tag {
  background: var(--color-tag-excluded) !important;
}

.tagify__tag.control-tag {
  background: #43f6ff;
}

.tagify-search-container .tagify__tag.excluded-tag .tagify__tag-text {
  color: var(--color-white) !important;
}

/* Style for search terms - white background with black border */
.tagify-search-container .tagify__tag.search-term-tag {
  /* background: var(--color-tag-search) !important; */
  /* border: var(--border-width-bold) solid var(--color-tag-search) !important; */
}

.tagify-search-container .tagify__tag.search-term-tag .tagify__tag-text {
  /* color: var(--color-black) !important; */
}

/* Hide the remove button (X) on tags */
.tagify-search-container .tagify__tag__removeBtn {
  display: none !important;
}

/* Fix tagify styling issues */
.tagify-search-container .tagify__tag > div::before {
  box-shadow: unset;
}

tags.tagify.tagify--mix {
  display: none;
  flex-grow: 1;
  /* margin-bottom: 0; */
  /* border: var(--border-width) solid var(--color-border); */
}

.tagify__tag > div {
  /* padding: 0 0 0 var(--spacing-2xs) !important; */
}

.tagify-search-container .tagify {
  /* padding: 0 !important; */
  /* border: var(--border-width) solid var(--color-border) !important; */
  /* background-color: var(--color-white); */
}

.tagify__input::before {
  display: flex !important;
  align-items: center;
  height: fit-content !important;
}

tag.tagify__tag {
  /* border: var(--border-width-bold) solid; */
}

.tagify__dropdown__item--active {
  /* background: var(--color-form-bg) !important; */
}

.tagify__dropdown {
  min-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
}

.tagify__dropdown__wrapper {
  min-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
}

/* Category group styling */
.tagify__dropdown__item-group {
  margin-bottom: var(--spacing-xs);
}

.tagify__dropdown__item-group:last-child {
  margin-bottom: 0;
}

/* Custom styling for dropdown items with action buttons */
.custom-actions .tagify__dropdown__item {
  padding: 0;
  margin: 0;
}

.tagify__dropdown__item__actions {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  justify-content: space-between;
}

.tagify__dropdown__item__actions .action-btn {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1;
  text-align: left;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 var(--spacing-sm);
}

.tagify__dropdown__item__actions .action-btn.add {
  flex: 1;
  width: 100%;
}

.tagify__dropdown__item {
  color: var(--tag-foreground) !important;
}

.tagify__dropdown__item__actions .action-btn.add .tag {
  display: inline;
  width: fit-content;
  background-color: var(--tag-background);
  color: var(--tag-foreground) !important;
  padding: var(--spacing-3xs) var(--spacing-2xs);
  border-radius: var(--border-radius);
}

.tagify__dropdown__item__actions .action-btn.exclude {
  color: var(--color-button-danger);
}

/* Category headers in tagify dropdown */
.tagify-dropdown-category-header {
  background: var(--color-white) !important;
  border-bottom: 0 !important;
  padding: var(--spacing-xs) var(--spacing-sm) !important;
  font-weight: 700 !important;
  font-size: var(--font-size-3xl) !important;
  color: var(--color-gray-900) !important;
  cursor: default !important;
  pointer-events: none !important;
  user-select: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

.tagify-dropdown-category-header .category-name {
  letter-spacing: 0.5px !important;
  font-weight: 700 !important;
}

.tagify-dropdown-category-header .category-count {
  font-size: 0.75em !important;
  color: var(--color-gray-600) !important;
  font-weight: 400 !important;
}

.tagify-dropdown-item .tag-name {
  font-weight: 500 !important;
}

.tagify-dropdown-item .tag-category {
  font-size: 0.75em !important;
  color: var(--color-gray-600) !important;
  font-style: italic !important;
  opacity: 0.8 !important;
}

/* Ensure category headers don't get hover effects */
.tagify__dropdown__item:hover .tagify-dropdown-category-header {
  background: var(--color-gray-300) !important;
}

.tagify__input {
  min-width: fit-content !important;
}