/*
 * Tagify CSS - imported directly from CDN
 */
@import "https://cdn.jsdelivr.net/npm/@yaireo/tagify@4.17.9/dist/tagify.min.css";

/*
 * Custom theme overrides for Tagify
 * These variables override the default Tagify styling to match our app
 */
:root {
  --tagify-dd-color-primary: #f97316; /* Orange 500 */
  --tagify-dd-text-color: #171717;    /* Neutral 900 */
  --tagify-dd-bg-color: white;
}

.tagify {
  --tags-border-color: #d4d4d4;        /* Neutral 300 */
  --tags-hover-border-color: #a3a3a3;  /* Neutral 400 */
  --tags-focus-border-color: #f97316;  /* Orange 500 */
  --tag-bg: #f97316;                   /* Orange 500 */
  --tag-hover: #ea580c;                /* Orange 600 */
  --tag-text-color: white;
  --tag-text-color--edit: #404040;     /* Neutral 700 */
  --tag-pad: 0.25rem 0.5rem;
  --tag-border-radius: 0.375rem;       /* rounded-md */
  --tag-inset-shadow-size: 1.1em;
  --placeholder-color: #a3a3a3;        /* Neutral 400 */

  border-radius: 0.375rem;             /* rounded-md */
  background-color: white;             /* Add explicit background */
}

/* Improve remove button hover style */
.tagify__tag__removeBtn {
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.15s ease-in-out;
}

.tagify__tag__removeBtn:hover {
  color: white;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(1.1);
}

/* Add a better focus state for accessibility */
.tagify__tag__removeBtn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  border-radius: 50%;
}

/* Dark mode overrides */
.dark .tagify {
  --tags-border-color: #525252;        /* Neutral 600 */
  --tags-hover-border-color: #737373;  /* Neutral 500 */
  --tagify-dd-text-color: #fafafa;     /* Neutral 50 */
  --tagify-dd-bg-color: #262626;       /* Neutral 800 */
  background-color: #262626;           /* Neutral 800 */
  color: #e5e5e5;                      /* Neutral 200 */
}

/* Fix tag input background in dark mode */
.dark .tagify__input {
  color: #e5e5e5;                      /* Neutral 200 */
}

/* Ensure dropdown background in dark mode */
.dark .tagify__dropdown {
  background-color: #262626;           /* Neutral 800 */
  border-color: #525252;               /* Neutral 600 */
}

/* Fix tagify background in form elements */
.dark fieldset .bg-white .tagify {
  background-color: #262626;           /* Neutral 800 */
}

/* Fix input fields in dark mode */
.dark .tagify__input::before {
  color: #a3a3a3 !important;           /* Neutral 400 for placeholder in dark mode */
}