:root {
    --tagify-dd-max-height: 200px;
    --tagify-dd-item-pad: 0.5rem 0.75rem;
}

.tagify {
    --tag-bg: var(--bs-secondary-bg);
    --tag-hover: var(--bs-tertiary-bg);
    --tag-text: var(--bs-body-color);
    --tag-border: var(--bs-border-color);
    --tag-remove-btn-bg: var(--bs-danger-bg-subtle);
    --tag-remove-btn-bg--hover: var(--bs-danger);
    
    border: none !important;
    background: transparent !important;
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
    padding: 0.375rem 0.75rem;
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tagify:focus-within {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.tagify__input {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: inherit;
    line-height: inherit;
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-weight: inherit;
}

.tagify__input:empty::before {
    content: "กรุณากด Enter ก่อนค้นหาคำ ข้อกฎหมาย ข้อหารือ";
    color: var(--bs-secondary-color);
    opacity: 1;
    position: static;
    transform: none;
    pointer-events: none;
    font-size: inherit;
    line-height: inherit;
    font-style: normal;
}

.tagify:not(.tagify--empty) .tagify__input::before {
    display: none !important;
}

.tagify--focus:not(.tagify--empty) .tagify__input::before {
    display: none !important;
}

/* Default tags styling - Bootstrap badge style */
.tagify__tag {
    margin: 0.125rem 0.25rem 0.125rem 0;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: var(--bs-badge-font-weight);
    line-height: 1;
    border-radius: var(--bs-badge-border-radius);
    background-color: var(--tag-bg);
    border: var(--bs-border-width) solid var(--tag-border);
    color: var(--tag-text);
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.tagify__tag:hover {
    background-color: var(--tag-hover);
    border-color: var(--bs-border-color-translucent);
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Bootstrap semantic colors for operators */
.tagify__tag[data-data*="and"],
.tagify__tag--operator-and {
    --tag-bg: var(--bs-success-bg-subtle) !important;
    --tag-text: var(--bs-success-text-emphasis) !important;
    --tag-border: var(--bs-success-border-subtle) !important;
    --tag-hover: var(--bs-success) !important;
}

.tagify__tag[data-data*="and"]:hover,
.tagify__tag--operator-and:hover {
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-success) !important;
}

.tagify__tag[data-data*="or"],
.tagify__tag--operator-or {
    --tag-bg: var(--bs-warning-bg-subtle) !important;
    --tag-text: var(--bs-warning-text-emphasis) !important;
    --tag-border: var(--bs-warning-border-subtle) !important;
    --tag-hover: var(--bs-warning) !important;
}

.tagify__tag[data-data*="or"]:hover,
.tagify__tag--operator-or:hover {
    background-color: var(--bs-warning) !important;
    color: var(--bs-dark) !important;
    border-color: var(--bs-warning) !important;
}

.tagify__tag[data-data*="not"],
.tagify__tag--operator-not {
    --tag-bg: var(--bs-danger-bg-subtle) !important;
    --tag-text: var(--bs-danger-text-emphasis) !important;
    --tag-border: var(--bs-danger-border-subtle) !important;
    --tag-hover: var(--bs-danger) !important;
}

.tagify__tag[data-data*="not"]:hover,
.tagify__tag--operator-not:hover {
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-danger) !important;
}

/* Remove button styling */
.tagify__tag__removeBtn {
    opacity: 0.65;
    transition: opacity 0.15s ease-in-out;
    margin-inline-start: 0.375rem;
    font-size: 0.875em;
    color: inherit;
    width: 1.25em;
    height: 1.25em;
    border-radius: var(--bs-border-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}

.tagify__tag:hover .tagify__tag__removeBtn {
    opacity: 1;
    background-color: rgba(var(--bs-emphasis-color-rgb), 0.1);
}

.tagify__tag__removeBtn:hover {
    background-color: var(--tag-remove-btn-bg--hover) !important;
    color: var(--bs-white) !important;
    transform: scale(1.1);
}

/* Dropdown styling with Bootstrap classes */
.tagify__dropdown {
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
    background-color: var(--bs-dropdown-bg);
    background-clip: padding-box;
    box-shadow: var(--bs-dropdown-box-shadow);
    max-height: var(--tagify-dd-max-height);
    overflow-y: auto;
    z-index: var(--bs-dropdown-zindex);
}

.tagify__dropdown__item {
    padding: var(--tagify-dd-item-pad);
    color: var(--bs-dropdown-link-color);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--bs-dropdown-divider-bg);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    cursor: pointer;
}

.tagify__dropdown__item:hover,
.tagify__dropdown__item--active,
.tagify__dropdown__item:focus {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

.tagify__dropdown__item:last-child {
    border-bottom: none;
}

.tagify__dropdown__item:active {
    color: var(--bs-dropdown-link-active-color);
    background-color: var(--bs-dropdown-link-active-bg);
}

/* Integration with Bootstrap form controls */
.form-control.tagify {
    height: auto;
    min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
    padding: 0.375rem 0.75rem;
}

.form-control.tagify.form-control-sm {
    min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
    padding: 0.25rem 0.5rem;
    font-size: var(--bs-font-size-sm);
}

.form-control.tagify.form-control-lg {
    min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
    padding: 0.5rem 1rem;
    font-size: var(--bs-font-size-lg);
}

/* Dark mode support */
[data-bs-theme="dark"] .tagify {
    --tag-bg: var(--bs-dark);
    --tag-hover: var(--bs-secondary);
    --tag-text: var(--bs-body-color);
    --tag-border: var(--bs-border-color);
}

/* Responsive breakpoints */
@media (max-width: 575.98px) {
    .tagify__tag {
        font-size: 0.7em;
        padding: 0.25em 0.5em;
        margin: 0.1rem 0.15rem 0.1rem 0;
    }
    
    .tagify__input:empty::before {
        font-size: 0.9rem;
    }
    
    .tagify__tag__removeBtn {
        width: 1em;
        height: 1em;
        margin-inline-start: 0.25rem;
    }
}

@media (max-width: 767.98px) {
    .tagify {
        font-size: 0.95rem;
    }
}

/* Animation for adding/removing tags */
.tagify__tag {
    animation: tagify--tag-show 0.15s ease-out forwards;
}

@keyframes tagify--tag-show {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.tagify__tag--remove {
    animation: tagify--tag-hide 0.15s ease-in forwards;
}

@keyframes tagify--tag-hide {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
}

/* Loading state */
.tagify--loading::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--bs-secondary);
    border-radius: 50%;
    border-top-color: var(--bs-primary);
    animation: spinner 0.8s linear infinite;
    margin-inline-start: 0.5rem;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Header dynamic styles */
#kt_header {
    transition: height 0.3s ease;
    min-height: 70px;
    max-height: 300px;
    overflow: visible;
}

.tagify {
    min-height: 40px;
    max-height: 200px;
    overflow-y: auto;
    transition: height 0.2s ease;
}

.header-search-container {
    padding: 10px 0;
    transition: padding 0.3s ease;
}

.tagify.tagify--expanded {
    max-height: none;
}

.header-expanded {
    height: auto !important;
    min-height: 120px;
}

.tagify__input {
    min-height: 20px;
    line-height: 1.4;
}