/* ===== Tagify 巨頭風格覆蓋（用於標籤區塊表單） ===== */
/* 需先載入 @yaireo/tagify/dist/tagify.css */

.x-pg-form-group--tagify .tagify {
	--tagify-dd-max-height: 220px;
	--tags-border-color: var(--x-pg-border, #e8ecf1);
	--tag-bg: #f1f5f9;
	--tag-hover: #e2e8f0;
	--tag-text-color: var(--x-pg-text, #1e293b);
	--tag-remove-btn-color: #94a3b8;
	--tag-remove-btn-color--hover: #ef4444;
	--input-color: var(--x-pg-text, #1e293b);
	--placeholder-color: var(--x-pg-text-muted, #64748b);
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid var(--tags-border-color);
	border-radius: var(--x-pg-radius-sm, 8px);
	background: var(--x-pg-surface, #fff);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	flex-wrap: wrap;
}
.x-pg-form-group--tagify .tagify:hover {
	border-color: #cbd5e1;
}
.x-pg-form-group--tagify .tagify.tagify--focus {
	border-color: var(--x-pg-edit-accent, #434f84);
	box-shadow: 0 0 0 3px rgba(67, 79, 132, 0.12);
	outline: none;
}
.x-pg-form-group--tagify .tagify__tag {
	margin: 2px 4px 2px 0;
	padding: 5px 8px 5px 10px;
	border-radius: 6px;
	background: var(--tag-bg);
	color: var(--tag-text-color);
	font-size: 13px;
	line-height: 1.35;
	border: none;
	box-shadow: none;
	white-space: nowrap;
	flex-shrink: 0;
	max-width: none;
	overflow: visible;
	text-overflow: unset;
}
/* 標籤內編輯時：不換行、不省略，完整顯示；標籤太長時下一個標籤會換行 */
.x-pg-form-group--tagify .tagify__tag .tagify__tag-text,
.x-pg-form-group--tagify .tagify__tag [contenteditable="true"] {
	white-space: nowrap;
	display: inline-block;
	min-width: 1em;
	max-width: none;
	overflow: visible;
	text-overflow: unset;
}
.x-pg-form-group--tagify .tagify__tag.tagify__tag--editable {
	max-width: none;
	overflow: visible;
}
.x-pg-form-group--tagify .tagify__tag.tagify__tag--editable .tagify__tag-text,
.x-pg-form-group--tagify .tagify__tag.tagify__tag--editable [contenteditable="true"] {
	max-width: none;
	overflow: visible;
	text-overflow: unset;
}
/* 編輯中不顯示刪除按鈕，但保留空間 */
.x-pg-form-group--tagify .tagify__tag.tagify__tag--editable .tagify__tag__removeBtn {
	visibility: hidden;
	pointer-events: none;
}
.x-pg-form-group--tagify .tagify__tag:hover {
	background: var(--tag-hover);
}
.x-pg-form-group--tagify .tagify__tag__removeBtn {
	margin-left: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	opacity: 0.7;
	color: var(--tag-remove-btn-color);
	font-size: 11px;
}
.x-pg-form-group--tagify .tagify__tag__removeBtn:hover {
	opacity: 1;
	color: var(--tag-remove-btn-color--hover);
	background: rgba(239, 68, 68, 0.1);
}
.x-pg-form-group--tagify .tagify__input {
	padding: 6px 4px;
	margin: 0;
	min-width: 100px;
	font-size: 13px;
	color: var(--input-color);
}
.x-pg-form-group--tagify .tagify__input::placeholder {
	color: var(--placeholder-color);
}
.x-pg-form-group--tagify .tagify__input:empty::before {
	color: var(--placeholder-color);
}
/* 下拉建議清單（若有啟用） */
.tagify__dropdown {
	border-radius: var(--x-pg-radius-sm, 8px);
	border: 1px solid var(--x-pg-border, #e8ecf1);
	box-shadow: var(--x-pg-shadow-md, 0 4px 16px -2px rgba(15, 23, 42, 0.06));
	overflow: hidden;
}
.tagify__dropdown__item {
	padding: 8px 12px;
	font-size: 13px;
}
.tagify__dropdown__item--active {
	background: #f1f5f9;
	color: var(--x-pg-edit-accent, #434f84);
}