/* Custom Tagify Styles - Match with original JavaScript version */
/* Support both light-style and dark-style themes */

/* ===== LIGHT THEME STYLES ===== */

/* Light Theme - Users List, Avatar List & Flexible Avatars Styling */
.light-style .tagify.users-list .tagify__tag,
.light-style .tagify.avatar-list .tagify__tag,
.light-style .tagify.flexible-avatars .tagify__tag,
[data-theme="theme-default"] .tagify.users-list .tagify__tag,
[data-theme="theme-default"] .tagify.avatar-list .tagify__tag,
[data-theme="theme-default"] .tagify.flexible-avatars .tagify__tag {
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    background: #f8f9fa;
    color: #2f2b3d;
    border: 1px solid #dee2e6;
}

/* Light Theme - Dropdown Styling */
.light-style .tagify__dropdown.users-list,
.light-style .tagify__dropdown.avatar-list,
.light-style .tagify__dropdown.flexible-avatars,
[data-theme="theme-default"] .tagify__dropdown.users-list,
[data-theme="theme-default"] .tagify__dropdown.avatar-list,
[data-theme="theme-default"] .tagify__dropdown.flexible-avatars {
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid #dee2e6;
    background: #fff;
}

/* Light Theme - Dropdown Items */
.light-style .tagify__dropdown__item,
[data-theme="theme-default"] .tagify__dropdown__item {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f8f9fa;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #2f2b3d;
}

.light-style .tagify__dropdown__item:hover,
[data-theme="theme-default"] .tagify__dropdown__item:hover {
    background-color: #f8f9fa;
}

/* Light Theme - Tag Text */
.light-style .tagify__tag-text,
[data-theme="theme-default"] .tagify__tag-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    text-decoration: none !important;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
}

/* Light Theme - Add All Header */
.light-style .tagify__dropdown__item__addAll,
[data-theme="theme-default"] .tagify__dropdown__item__addAll {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #2f2b3d;
}

.light-style .tagify__dropdown__item__addAll:hover,
[data-theme="theme-default"] .tagify__dropdown__item__addAll:hover {
    background-color: #e9ecef;
}

/* ===== DARK THEME STYLES ===== */

/* Dark Theme - Users List, Avatar List & Flexible Avatars Styling */
.dark-style .tagify.users-list .tagify__tag,
.dark-style .tagify.avatar-list .tagify__tag,
.dark-style .tagify.flexible-avatars .tagify__tag,
[data-theme="theme-dark"] .tagify.users-list .tagify__tag,
[data-theme="theme-dark"] .tagify.avatar-list .tagify__tag,
[data-theme="theme-dark"] .tagify.flexible-avatars .tagify__tag {
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    background: #2f3349 !important;
    color: #b4b7bd !important;
    border: 1px solid #3b4253 !important;
}

/* Dark Theme - Dropdown Styling */
.dark-style .tagify__dropdown.users-list,
.dark-style .tagify__dropdown.avatar-list,
.dark-style .tagify__dropdown.flexible-avatars,
.dark-style .tagify__dropdown,
[data-theme="theme-dark"] .tagify__dropdown.users-list,
[data-theme="theme-dark"] .tagify__dropdown.avatar-list,
[data-theme="theme-dark"] .tagify__dropdown.flexible-avatars,
[data-theme="theme-dark"] .tagify__dropdown {
    border-radius: 0.375rem !important;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #3b4253 !important;
    background: #2f3349 !important;
    background-color: #2f3349 !important;
}

/* Dark Theme - Dropdown Items */
.dark-style .tagify__dropdown__item,
[data-theme="theme-dark"] .tagify__dropdown__item {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #3b4253 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #b4b7bd !important;
    background-color: transparent !important;
}

.dark-style .tagify__dropdown__item:hover,
[data-theme="theme-dark"] .tagify__dropdown__item:hover {
    background-color: #3b4253 !important;
    color: #cfcde4 !important;
}

/* Dark Theme - Tag Text */
.dark-style .tagify__tag-text,
[data-theme="theme-dark"] .tagify__tag-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #b4b7bd !important;
    text-decoration: none !important;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
}

/* Dark Theme - Add All Header */
.dark-style .tagify__dropdown__item__addAll,
[data-theme="theme-dark"] .tagify__dropdown__item__addAll {
    background-color: #3b4253 !important;
    border-bottom: 1px solid #4a4f63 !important;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: #b4b7bd !important;
}

.dark-style .tagify__dropdown__item__addAll:hover,
[data-theme="theme-dark"] .tagify__dropdown__item__addAll:hover {
    background-color: #4a4f63 !important;
}

/* Force dark theme for all dropdown elements */
.dark-style .tagify__dropdown *,
[data-theme="theme-dark"] .tagify__dropdown * {
    background-color: inherit !important;
}

.dark-style .tagify__dropdown__wrapper,
[data-theme="theme-dark"] .tagify__dropdown__wrapper {
    background-color: #2f3349 !important;
}

/* Override any white backgrounds in dropdown */
.dark-style .tagify__dropdown .tagify__dropdown__item,
[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item {
    background: transparent !important;
}

.dark-style .tagify__dropdown .tagify__dropdown__item:not(:hover),
[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item:not(:hover) {
    background-color: transparent !important;
}

/* ===== COMMON STYLES (Both Light & Dark) ===== */

.tagify.users-list .tagify__tag > div,
.tagify.avatar-list .tagify__tag > div,
.tagify.flexible-avatars .tagify__tag > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;
}

/* UIComponents Avatar integration trong tags */
.tagify__tag__avatar-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
}

.tagify__tag__avatar-wrap .avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tagify__tag__avatar-wrap .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fix avatar alignment */
.tagify__tag__avatar-wrap .avatar .avatar-initial {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
}

/* UIComponents Avatar integration trong dropdown */
.tagify__dropdown__item__avatar-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tagify__dropdown__item__avatar-wrap .avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
}

.tagify__dropdown__item__avatar-wrap .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Avatar Initial Styling for Flexible Avatars */
.avatar-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.75rem;
}

/* Avatar Color Classes - Light Theme */
.light-style .bg-label-primary,
[data-theme="theme-default"] .bg-label-primary {
    background-color: rgba(115, 103, 240, 0.16) !important;
    color: #7367f0 !important;
}

.light-style .bg-label-success,
[data-theme="theme-default"] .bg-label-success {
    background-color: rgba(40, 167, 69, 0.16) !important;
    color: #28a745 !important;
}

.light-style .bg-label-info,
[data-theme="theme-default"] .bg-label-info {
    background-color: rgba(23, 162, 184, 0.16) !important;
    color: #17a2b8 !important;
}

.light-style .bg-label-warning,
[data-theme="theme-default"] .bg-label-warning {
    background-color: rgba(255, 171, 0, 0.16) !important;
    color: #ffab00 !important;
}

.light-style .bg-label-danger,
[data-theme="theme-default"] .bg-label-danger {
    background-color: rgba(220, 53, 69, 0.16) !important;
    color: #dc3545 !important;
}

.light-style .bg-label-secondary,
[data-theme="theme-default"] .bg-label-secondary {
    background-color: rgba(108, 117, 125, 0.16) !important;
    color: #6c757d !important;
}

/* Avatar Color Classes - Dark Theme */
.dark-style .bg-label-primary,
[data-theme="theme-dark"] .bg-label-primary {
    background-color: rgba(115, 103, 240, 0.2) !important;
    color: #a29bfb !important;
}

.dark-style .bg-label-success,
[data-theme="theme-dark"] .bg-label-success {
    background-color: rgba(40, 167, 69, 0.2) !important;
    color: #71dd8a !important;
}

.dark-style .bg-label-info,
[data-theme="theme-dark"] .bg-label-info {
    background-color: rgba(23, 162, 184, 0.2) !important;
    color: #6edff6 !important;
}

.dark-style .bg-label-warning,
[data-theme="theme-dark"] .bg-label-warning {
    background-color: rgba(255, 171, 0, 0.2) !important;
    color: #ffca64 !important;
}

.dark-style .bg-label-danger,
[data-theme="theme-dark"] .bg-label-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    color: #ff6b7d !important;
}

.dark-style .bg-label-secondary,
[data-theme="theme-dark"] .bg-label-secondary {
    background-color: rgba(108, 117, 125, 0.2) !important;
    color: #a7acb2 !important;
}

.tagify__dropdown__item .fw-medium {
    font-weight: 500;
}

.tagify__dropdown__item span {
    font-size: 0.8125rem;
    opacity: 0.8;
}

.tagify__dropdown__item__addAll strong {
    font-size: 0.875rem;
}

.tagify__dropdown__item__addAll span {
    font-size: 0.8125rem;
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .tagify__tag {
        font-size: 0.8125rem;
        padding: 0.25rem 0.375rem;
        height: 28px;
    }
    
    .tagify__tag__avatar-wrap .avatar {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
    
    .tagify__dropdown__item__avatar-wrap .avatar {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
}

/* Focus states */
.tagify:focus-within {
    box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.25);
}

/* Light Theme Focus */
.light-style .tagify:focus-within,
[data-theme="theme-default"] .tagify:focus-within {
    border-color: #7367f0;
}

/* Dark Theme Focus */
.dark-style .tagify:focus-within,
[data-theme="theme-dark"] .tagify:focus-within {
    border-color: #a29bfb;
    box-shadow: 0 0 0 0.2rem rgba(162, 155, 251, 0.25);
}

/* Tagify Input Styling */
/* Light Theme */
.light-style .tagify,
[data-theme="theme-default"] .tagify {
    background: #fff;
    border: 1px solid #dee2e6;
    color: #2f2b3d;
}

.light-style .tagify__input,
[data-theme="theme-default"] .tagify__input {
    color: #2f2b3d;
}

.light-style .tagify__input::placeholder,
[data-theme="theme-default"] .tagify__input::placeholder {
    color: #6c757d;
}

/* Dark Theme */
.dark-style .tagify,
[data-theme="theme-dark"] .tagify {
    background: #2f3349;
    border: 1px solid #3b4253;
    color: #b4b7bd;
}

.dark-style .tagify__input,
[data-theme="theme-dark"] .tagify__input {
    color: #b4b7bd;
}

.dark-style .tagify__input::placeholder,
[data-theme="theme-dark"] .tagify__input::placeholder {
    color: #7c8db5;
}

/* Remove button styling */
/* Light Theme */
.light-style .tagify__tag__removeBtn,
[data-theme="theme-default"] .tagify__tag__removeBtn {
    color: #6c757d;
}

.light-style .tagify__tag__removeBtn:hover,
[data-theme="theme-default"] .tagify__tag__removeBtn:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* Dark Theme */
.dark-style .tagify__tag__removeBtn,
[data-theme="theme-dark"] .tagify__tag__removeBtn {
    color: #7c8db5;
}

.dark-style .tagify__tag__removeBtn:hover,
[data-theme="theme-dark"] .tagify__tag__removeBtn:hover {
    color: #ff6b7d;
    background: rgba(255, 107, 125, 0.1);
}

/* Fix hover effects and text decoration */
.tagify__tag:hover .tagify__tag-text,
.tagify__tag-text:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    outline: none !important;
}

/* Prevent any underline or border effects */
.tagify__tag span,
.tagify__tag div,
.tagify__tag-text {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Fix tag hover state */
.tagify__tag:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Ensure proper spacing and alignment */
.tagify__tag > div {
    align-items: center !important;
    gap: 0.375rem !important;
}

.tagify__tag__avatar-wrap + .tagify__tag-text {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* High specificity dark theme overrides */
html.dark-style .tagify__dropdown,
body.dark-style .tagify__dropdown,
.dark-style .tagify__dropdown,
html[data-theme="theme-dark"] .tagify__dropdown,
body[data-theme="theme-dark"] .tagify__dropdown,
[data-theme="theme-dark"] .tagify__dropdown {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
    border-color: #3b4253 !important;
    color: #b4b7bd !important;
}

/* Ensure dropdown items have proper dark background */
html.dark-style .tagify__dropdown .tagify__dropdown__item,
body.dark-style .tagify__dropdown .tagify__dropdown__item,
.dark-style .tagify__dropdown .tagify__dropdown__item,
html[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item,
body[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item,
[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item {
    background: transparent !important;
    background-color: transparent !important;
    color: #b4b7bd !important;
}

html.dark-style .tagify__dropdown .tagify__dropdown__item:hover,
body.dark-style .tagify__dropdown .tagify__dropdown__item:hover,
.dark-style .tagify__dropdown .tagify__dropdown__item:hover,
html[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item:hover,
body[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item:hover,
[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item:hover {
    background: #3b4253 !important;
    background-color: #3b4253 !important;
    color: #cfcde4 !important;
}

/* Ultra high specificity for dark theme dropdown - override any library CSS */
.dark-style .tagify__dropdown.tagify__dropdown,
[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown,
html.dark-style .tagify__dropdown.tagify__dropdown,
body.dark-style .tagify__dropdown.tagify__dropdown,
html[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown,
body[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
    border-color: #3b4253 !important;
    color: #b4b7bd !important;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.3) !important;
}

/* Force all child elements to inherit dark background */
.dark-style .tagify__dropdown.tagify__dropdown *,
[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown *,
html.dark-style .tagify__dropdown.tagify__dropdown *,
body.dark-style .tagify__dropdown.tagify__dropdown *,
html[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown *,
body[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown * {
    background-color: transparent !important;
    color: inherit !important;
}

/* Specific override for dropdown wrapper */
.dark-style .tagify__dropdown__wrapper.tagify__dropdown__wrapper,
[data-theme="theme-dark"] .tagify__dropdown__wrapper.tagify__dropdown__wrapper,
html.dark-style .tagify__dropdown__wrapper.tagify__dropdown__wrapper,
body.dark-style .tagify__dropdown__wrapper.tagify__dropdown__wrapper,
html[data-theme="theme-dark"] .tagify__dropdown__wrapper.tagify__dropdown__wrapper,
body[data-theme="theme-dark"] .tagify__dropdown__wrapper.tagify__dropdown__wrapper {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
}

/* FINAL OVERRIDE - Maximum specificity for dark theme */
html.dark-style body .tagify__dropdown.tagify__dropdown.tagify__dropdown,
html[data-theme="theme-dark"] body .tagify__dropdown.tagify__dropdown.tagify__dropdown,
body.dark-style .tagify__dropdown.tagify__dropdown.tagify__dropdown,
body[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown.tagify__dropdown {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
    border: 1px solid #3b4253 !important;
    color: #b4b7bd !important;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.3) !important;
}

html.dark-style body .tagify__dropdown__wrapper.tagify__dropdown__wrapper.tagify__dropdown__wrapper,
html[data-theme="theme-dark"] body .tagify__dropdown__wrapper.tagify__dropdown__wrapper.tagify__dropdown__wrapper,
body.dark-style .tagify__dropdown__wrapper.tagify__dropdown__wrapper.tagify__dropdown__wrapper,
body[data-theme="theme-dark"] .tagify__dropdown__wrapper.tagify__dropdown__wrapper.tagify__dropdown__wrapper {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
}

html.dark-style body .tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item,
html[data-theme="theme-dark"] body .tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item,
body.dark-style .tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item,
body[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item {
    background: transparent !important;
    background-color: transparent !important;
    color: #b4b7bd !important;
}

html.dark-style body .tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item:hover,
html[data-theme="theme-dark"] body .tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item:hover,
body.dark-style .tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item:hover,
body[data-theme="theme-dark"] .tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item:hover {
    background: #3b4253 !important;
    background-color: #3b4253 !important;
    color: #cfcde4 !important;
}

/* Fix for selected tags - remove underline on hover */
.dark-style .tagify__tag:hover,
[data-theme="theme-dark"] .tagify__tag:hover,
html.dark-style .tagify__tag:hover,
body.dark-style .tagify__tag:hover,
html[data-theme="theme-dark"] .tagify__tag:hover,
body[data-theme="theme-dark"] .tagify__tag:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.dark-style .tagify__tag:hover *,
[data-theme="theme-dark"] .tagify__tag:hover *,
html.dark-style .tagify__tag:hover *,
body.dark-style .tagify__tag:hover *,
html[data-theme="theme-dark"] .tagify__tag:hover *,
body[data-theme="theme-dark"] .tagify__tag:hover * {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.dark-style .tagify__tag:hover .tagify__tag-text,
[data-theme="theme-dark"] .tagify__tag:hover .tagify__tag-text,
html.dark-style .tagify__tag:hover .tagify__tag-text,
body.dark-style .tagify__tag:hover .tagify__tag-text,
html[data-theme="theme-dark"] .tagify__tag:hover .tagify__tag-text,
body[data-theme="theme-dark"] .tagify__tag:hover .tagify__tag-text {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* EXTREME SPECIFICITY - Force dropdown items dark background */
html.dark-style body .tagify__dropdown.tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item.tagify__dropdown__item,
html[data-theme="theme-dark"] body .tagify__dropdown.tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item.tagify__dropdown__item,
body.dark-style .tagify__dropdown.tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item.tagify__dropdown__item,
body[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item.tagify__dropdown__item {
    background: transparent !important;
    background-color: transparent !important;
    color: #b4b7bd !important;
    border-bottom: 1px solid #3b4253 !important;
}

html.dark-style body .tagify__dropdown.tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item.tagify__dropdown__item:hover,
html[data-theme="theme-dark"] body .tagify__dropdown.tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item.tagify__dropdown__item:hover,
body.dark-style .tagify__dropdown.tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item.tagify__dropdown__item:hover,
body[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown .tagify__dropdown__item.tagify__dropdown__item.tagify__dropdown__item:hover {
    background: #3b4253 !important;
    background-color: #3b4253 !important;
    color: #cfcde4 !important;
}

/* Force all dropdown content to be dark */
html.dark-style body .tagify__dropdown.tagify__dropdown .tagify__dropdown__wrapper.tagify__dropdown__wrapper.tagify__dropdown__wrapper,
html[data-theme="theme-dark"] body .tagify__dropdown.tagify__dropdown .tagify__dropdown__wrapper.tagify__dropdown__wrapper.tagify__dropdown__wrapper,
body.dark-style .tagify__dropdown.tagify__dropdown .tagify__dropdown__wrapper.tagify__dropdown__wrapper.tagify__dropdown__wrapper,
body[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown .tagify__dropdown__wrapper.tagify__dropdown__wrapper.tagify__dropdown__wrapper {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
}

/* Override any inline styles or CDN styles */
html.dark-style body .tagify__dropdown.tagify__dropdown * {
    background-color: inherit !important;
}

html[data-theme="theme-dark"] body .tagify__dropdown.tagify__dropdown * {
    background-color: inherit !important;
}

body.dark-style .tagify__dropdown.tagify__dropdown * {
    background-color: inherit !important;
}

body[data-theme="theme-dark"] .tagify__dropdown.tagify__dropdown * {
    background-color: inherit !important;
}

/* UNIVERSAL FIX - Remove all underlines and borders from tags */
.tagify__tag,
.tagify__tag *,
.tagify__tag:hover,
.tagify__tag:hover *,
.tagify__tag:focus,
.tagify__tag:focus *,
.tagify__tag:active,
.tagify__tag:active * {
    text-decoration: none !important;
    border-bottom: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    text-decoration-style: none !important;
    text-underline-offset: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Specific fix for tag text elements */
.tagify__tag-text,
.tagify__tag-text:hover,
.tagify__tag-text:focus,
.tagify__tag-text:active,
span.tagify__tag-text,
span.tagify__tag-text:hover,
span.tagify__tag-text:focus,
span.tagify__tag-text:active {
    text-decoration: none !important;
    border-bottom: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    text-decoration-style: none !important;
    text-underline-offset: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Override any browser default link styling */
.tagify__tag a,
.tagify__tag a:hover,
.tagify__tag a:focus,
.tagify__tag a:active,
.tagify__tag a:visited {
    text-decoration: none !important;
    border-bottom: none !important;
    color: inherit !important;
}

/* NUCLEAR OPTION - Force dark theme with maximum specificity */
html.dark-style body div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper div.tagify__dropdown__item,
html[data-theme="theme-dark"] body div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper div.tagify__dropdown__item,
body.dark-style div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper div.tagify__dropdown__item,
body[data-theme="theme-dark"] div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper div.tagify__dropdown__item {
    background: transparent !important;
    background-color: transparent !important;
    color: #b4b7bd !important;
    border-bottom-color: #3b4253 !important;
}

html.dark-style body div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper div.tagify__dropdown__item:hover,
html[data-theme="theme-dark"] body div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper div.tagify__dropdown__item:hover,
body.dark-style div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper div.tagify__dropdown__item:hover,
body[data-theme="theme-dark"] div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper div.tagify__dropdown__item:hover {
    background: #3b4253 !important;
    background-color: #3b4253 !important;
    color: #cfcde4 !important;
}

/* Force dropdown wrapper to be dark */
html.dark-style body div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper,
html[data-theme="theme-dark"] body div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper,
body.dark-style div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper,
body[data-theme="theme-dark"] div.tagify__dropdown.tagify__dropdown div.tagify__dropdown__wrapper {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
}

/* NUCLEAR OPTION - Force dark theme for TAGS with maximum specificity */
html.dark-style body .tagify.tagify .tagify__tag.tagify__tag,
html[data-theme="theme-dark"] body .tagify.tagify .tagify__tag.tagify__tag,
body.dark-style .tagify.tagify .tagify__tag.tagify__tag,
body[data-theme="theme-dark"] .tagify.tagify .tagify__tag.tagify__tag,
html.dark-style .tagify.tagify .tagify__tag.tagify__tag,
html[data-theme="theme-dark"] .tagify.tagify .tagify__tag.tagify__tag {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
    color: #b4b7bd !important;
    border: 1px solid #3b4253 !important;
    border-radius: 0.375rem !important;
}

/* Force dark theme for tag text */
html.dark-style body .tagify.tagify .tagify__tag.tagify__tag .tagify__tag-text,
html[data-theme="theme-dark"] body .tagify.tagify .tagify__tag.tagify__tag .tagify__tag-text,
body.dark-style .tagify.tagify .tagify__tag.tagify__tag .tagify__tag-text,
body[data-theme="theme-dark"] .tagify.tagify .tagify__tag.tagify__tag .tagify__tag-text,
html.dark-style .tagify.tagify .tagify__tag.tagify__tag .tagify__tag-text,
html[data-theme="theme-dark"] .tagify.tagify .tagify__tag.tagify__tag .tagify__tag-text {
    color: #b4b7bd !important;
}

/* Force dark theme for all tag children */
html.dark-style body .tagify.tagify .tagify__tag.tagify__tag *,
html[data-theme="theme-dark"] body .tagify.tagify .tagify__tag.tagify__tag *,
body.dark-style .tagify.tagify .tagify__tag.tagify__tag *,
body[data-theme="theme-dark"] .tagify.tagify .tagify__tag.tagify__tag *,
html.dark-style .tagify.tagify .tagify__tag.tagify__tag *,
html[data-theme="theme-dark"] .tagify.tagify .tagify__tag.tagify__tag * {
    color: inherit !important;
}

/* Specific override for different tagify modes */
html.dark-style body .tagify.users-list.tagify .tagify__tag.tagify__tag,
html.dark-style body .tagify.avatar-list.tagify .tagify__tag.tagify__tag,
html.dark-style body .tagify.flexible-avatars.tagify .tagify__tag.tagify__tag,
html[data-theme="theme-dark"] body .tagify.users-list.tagify .tagify__tag.tagify__tag,
html[data-theme="theme-dark"] body .tagify.avatar-list.tagify .tagify__tag.tagify__tag,
html[data-theme="theme-dark"] body .tagify.flexible-avatars.tagify .tagify__tag.tagify__tag,
body.dark-style .tagify.users-list.tagify .tagify__tag.tagify__tag,
body.dark-style .tagify.avatar-list.tagify .tagify__tag.tagify__tag,
body.dark-style .tagify.flexible-avatars.tagify .tagify__tag.tagify__tag,
body[data-theme="theme-dark"] .tagify.users-list.tagify .tagify__tag.tagify__tag,
body[data-theme="theme-dark"] .tagify.avatar-list.tagify .tagify__tag.tagify__tag,
body[data-theme="theme-dark"] .tagify.flexible-avatars.tagify .tagify__tag.tagify__tag {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
    color: #b4b7bd !important;
    border: 1px solid #3b4253 !important;
}

/* ULTIMATE OVERRIDE - Target the actual <tag> element */
html.dark-style body tag.tagify__tag,
html[data-theme="theme-dark"] body tag.tagify__tag,
body.dark-style tag.tagify__tag,
body[data-theme="theme-dark"] tag.tagify__tag,
html.dark-style tag.tagify__tag,
html[data-theme="theme-dark"] tag.tagify__tag {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
    color: #b4b7bd !important;
    border: 1px solid #3b4253 !important;
    border-radius: 0.375rem !important;
}

/* Override tag text inside <tag> element */
html.dark-style body tag.tagify__tag span.tagify__tag-text,
html[data-theme="theme-dark"] body tag.tagify__tag span.tagify__tag-text,
body.dark-style tag.tagify__tag span.tagify__tag-text,
body[data-theme="theme-dark"] tag.tagify__tag span.tagify__tag-text,
html.dark-style tag.tagify__tag span.tagify__tag-text,
html[data-theme="theme-dark"] tag.tagify__tag span.tagify__tag-text {
    color: #b4b7bd !important;
}

/* Override all children of <tag> element */
html.dark-style body tag.tagify__tag *,
html[data-theme="theme-dark"] body tag.tagify__tag *,
body.dark-style tag.tagify__tag *,
body[data-theme="theme-dark"] tag.tagify__tag *,
html.dark-style tag.tagify__tag *,
html[data-theme="theme-dark"] tag.tagify__tag * {
    color: inherit !important;
}

/* Specific override for tag with attributes */
html.dark-style body tag[class*="tagify__tag"],
html[data-theme="theme-dark"] body tag[class*="tagify__tag"],
body.dark-style tag[class*="tagify__tag"],
body[data-theme="theme-dark"] tag[class*="tagify__tag"],
html.dark-style tag[class*="tagify__tag"],
html[data-theme="theme-dark"] tag[class*="tagify__tag"] {
    background: #2f3349 !important;
    background-color: #2f3349 !important;
    color: #b4b7bd !important;
    border: 1px solid #3b4253 !important;
    border-radius: 0.375rem !important;
}

/* OVERRIDE TAGIFY CSS VARIABLES FOR DARK MODE */
html.dark-style .tagify,
html[data-theme="theme-dark"] .tagify,
body.dark-style .tagify,
body[data-theme="theme-dark"] .tagify,
.dark-style .tagify,
[data-theme="theme-dark"] .tagify {
    --tags-disabled-bg: #2f3349 !important;
    --tags-border-color: #3b4253 !important;
    --tags-hover-border-color: #4a4f63 !important;
    --tags-focus-border-color: #696cff !important;
    --tag-border-radius: 0.375rem !important;
    --tag-bg: #2f3349 !important;
    --tag-hover: #3b4253 !important;
    --tag-text-color: #b4b7bd !important;
    --tag-text-color--edit: #b4b7bd !important;
    --tag-pad: 0.375rem 0.5rem !important;
    --tag-inset-shadow-size: 1.1em !important;
    --tag-invalid-color: #ff6b6b !important;
    --tag-invalid-bg: rgba(255, 107, 107, 0.2) !important;
    --tag-remove-bg: rgba(255, 107, 107, 0.3) !important;
    --tag-remove-btn-color: #b4b7bd !important;
    --tag-remove-btn-bg: none !important;
    --tag-remove-btn-bg--hover: #ff6b6b !important;
    --input-color: #b4b7bd !important;
    --tag--min-width: 1ch !important;
    --tag--max-width: auto !important;
    --tag-hide-transition: 0.3s !important;
    --placeholder-color: rgba(180, 183, 189, 0.4) !important;
    --placeholder-color-focus: rgba(180, 183, 189, 0.6) !important;
    --loader-size: 0.8em !important;
    --readonly-striped: 1 !important;
}

/* FORCE DARK THEME VARIABLES WITH MAXIMUM SPECIFICITY */
html.dark-style body .tagify.tagify,
html[data-theme="theme-dark"] body .tagify.tagify,
body.dark-style .tagify.tagify,
body[data-theme="theme-dark"] .tagify.tagify {
    --tag-bg: #2f3349 !important;
    --tag-text-color: #b4b7bd !important;
    --tag-hover: #3b4253 !important;
    --tags-border-color: #3b4253 !important;
    --tags-focus-border-color: #696cff !important;
    background-color: transparent !important;
    border-color: #3b4253 !important;
}

/* Override for specific tagify modes */
html.dark-style body .tagify.users-list,
html.dark-style body .tagify.avatar-list,
html.dark-style body .tagify.flexible-avatars,
html[data-theme="theme-dark"] body .tagify.users-list,
html[data-theme="theme-dark"] body .tagify.avatar-list,
html[data-theme="theme-dark"] body .tagify.flexible-avatars,
body.dark-style .tagify.users-list,
body.dark-style .tagify.avatar-list,
body.dark-style .tagify.flexible-avatars,
body[data-theme="theme-dark"] .tagify.users-list,
body[data-theme="theme-dark"] .tagify.avatar-list,
body[data-theme="theme-dark"] .tagify.flexible-avatars {
    --tag-bg: #2f3349 !important;
    --tag-text-color: #b4b7bd !important;
    --tag-hover: #3b4253 !important;
    --tags-border-color: #3b4253 !important;
    --tags-focus-border-color: #696cff !important;
}