/* ===============================
   標籤管理頁面樣式
   =============================== */

/* 標籤網格 */
/* 標籤網格 - 改回 Grid 以確保寬度一致 (forceFallback 支援 Grid) */
.tags-grid,
.categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.tag-card,
.category-card {
	/* 移除 Flex 以配合 Grid */
	height: 100%; /* 確保卡片高度一致 */
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 20px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tag-card:hover,
.category-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	border-color: rgba(0, 217, 255, 0.3);
}

.tag-card-header,
.category-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* 細緻的分隔線 */
}

.tag-order,
.category-order {
	color: var(--sys-text-muted);
	font-size: 0.85rem;
	font-weight: 500;
}


.tag-card-body,
.category-card-body {
	padding-top: 16px;
}

.tag-stats,
.category-stats {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sys-text-muted);
	font-size: 0.9rem;
}

.stat-item i {
	font-size: 1rem;
	opacity: 0.6;
}

.color-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05); /* 增加一點邊框層次 */
}

.tags,
.categories {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.tag-item,
.category-item {
    cursor: pointer;
    display: inline-flex;
}

.tag-checkbox,
.category-checkbox {
    display: none;
}

.tag-checkbox:checked + .tag,
.category-checkbox:checked + .category {
    box-shadow: 0px 0px 10px rgb(255 255 255);
}



/* ===============================
        	Tags
   =============================== */

.tag {
	padding: 8px 16px;
	background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(0, 217, 255, 0.05));
	border: 1px solid rgba(0, 217, 255, 0.3);
	border-radius: 20px;
	color: var(--white);
	font-size: 0.75rem;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: default;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.tag:hover {
	background: linear-gradient(135deg, rgba(0, 217, 255, 0.25), rgba(0, 217, 255, 0.15));
	border-color: rgba(0, 217, 255, 0.5);
	box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
	transform: translateY(-2px);
}

/* 自訂顏色標籤 */
.tag-custom {
	--tag-color: var(--accent); /* Fallback */
	background: linear-gradient(135deg, color-mix(in srgb, var(--tag-color), transparent 85%), color-mix(in srgb, var(--tag-color), transparent 95%));
	border-color: color-mix(in srgb, var(--tag-color), transparent 70%); /* 30% opacity */
	color: var(--tag-color);
}

.tag-custom:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--tag-color), transparent 75%), color-mix(in srgb, var(--tag-color), transparent 85%));
	border-color: color-mix(in srgb, var(--tag-color), transparent 50%); /* 50% opacity */
	box-shadow: 0 4px 12px color-mix(in srgb, var(--tag-color), transparent 70%); /* 30% opacity */
}


/* ===============================
        Tag 顏色變換
   =============================== */


.tag-blue {
	background: linear-gradient(135deg, color-mix(in srgb, var(--blue), transparent 85%), color-mix(in srgb, var(--blue), transparent 95%));
	border-color: color-mix(in srgb, var(--blue), transparent 70%);
	color: var(--blue);
}

.tag-blue:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--blue), transparent 75%), color-mix(in srgb, var(--blue), transparent 85%));
	border-color: color-mix(in srgb, var(--blue), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--blue), transparent 70%);
}

.tag-cyan {
	background: linear-gradient(135deg, color-mix(in srgb, var(--cyan), transparent 85%), color-mix(in srgb, var(--cyan), transparent 95%));
	border-color: color-mix(in srgb, var(--cyan), transparent 70%);
	color: var(--cyan);
}

.tag-cyan:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--cyan), transparent 75%), color-mix(in srgb, var(--cyan), transparent 85%));
	border-color: color-mix(in srgb, var(--cyan), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--cyan), transparent 70%);
}

.tag-green {
	background: linear-gradient(135deg, color-mix(in srgb, var(--green), transparent 85%), color-mix(in srgb, var(--green), transparent 95%));
	border-color: color-mix(in srgb, var(--green), transparent 70%);
	color: var(--green);
}

.tag-green:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--green), transparent 75%), color-mix(in srgb, var(--green), transparent 85%));
	border-color: color-mix(in srgb, var(--green), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--green), transparent 70%);
}

.tag-orange {
	background: linear-gradient(135deg, color-mix(in srgb, var(--orange), transparent 85%), color-mix(in srgb, var(--orange), transparent 95%));
	border-color: color-mix(in srgb, var(--orange), transparent 70%);
	color: var(--orange);
}

.tag-orange:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--orange), transparent 75%), color-mix(in srgb, var(--orange), transparent 85%));
	border-color: color-mix(in srgb, var(--orange), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--orange), transparent 70%);
}

.tag-red {
	background: linear-gradient(135deg, color-mix(in srgb, var(--red), transparent 85%), color-mix(in srgb, var(--red), transparent 95%));
	border-color: color-mix(in srgb, var(--red), transparent 70%);
	color: var(--red);
}

.tag-red:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--red), transparent 75%), color-mix(in srgb, var(--red), transparent 85%));
	border-color: color-mix(in srgb, var(--red), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--red), transparent 70%);
}

.tag-purple {
	background: linear-gradient(135deg, color-mix(in srgb, var(--purple), transparent 85%), color-mix(in srgb, var(--purple), transparent 95%));
	border-color: color-mix(in srgb, var(--purple), transparent 70%);
	color: var(--purple);
}

.tag-purple:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--purple), transparent 75%), color-mix(in srgb, var(--purple), transparent 85%));
	border-color: color-mix(in srgb, var(--purple), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--purple), transparent 70%);
}

.tag-yellow {
	background: linear-gradient(135deg, color-mix(in srgb, var(--yellow), transparent 85%), color-mix(in srgb, var(--yellow), transparent 95%));
	border-color: color-mix(in srgb, var(--yellow), transparent 70%);
	color: var(--yellow);
}

.tag-yellow:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--yellow), transparent 75%), color-mix(in srgb, var(--yellow), transparent 85%));
	border-color: color-mix(in srgb, var(--yellow), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--yellow), transparent 70%);
}

.tag-pink {
	background: linear-gradient(135deg, color-mix(in srgb, var(--pink), transparent 85%), color-mix(in srgb, var(--pink), transparent 95%));
	border-color: color-mix(in srgb, var(--pink), transparent 70%);
	color: var(--pink);
}

.tag-pink:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--pink), transparent 75%), color-mix(in srgb, var(--pink), transparent 85%));
	border-color: color-mix(in srgb, var(--pink), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--pink), transparent 70%);
}

.tag-gray {
	background: linear-gradient(135deg, color-mix(in srgb, var(--gray), transparent 85%), color-mix(in srgb, var(--gray), transparent 95%));
	border-color: color-mix(in srgb, var(--gray), transparent 70%);
	color: var(--gray);
}

.tag-gray:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--gray), transparent 75%), color-mix(in srgb, var(--gray), transparent 85%));
	border-color: color-mix(in srgb, var(--gray), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--gray), transparent 70%);
}

.tag-brown {
	background: linear-gradient(135deg, color-mix(in srgb, var(--brown), transparent 85%), color-mix(in srgb, var(--brown), transparent 95%));
	border-color: color-mix(in srgb, var(--brown), transparent 70%);
	color: var(--brown);
}


.tag-brown:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--brown), transparent 75%), color-mix(in srgb, var(--brown), transparent 85%));
	border-color: color-mix(in srgb, var(--brown), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--brown), transparent 70%);
}

.tag-teal {
	background: linear-gradient(135deg, color-mix(in srgb, var(--teal), transparent 85%), color-mix(in srgb, var(--teal), transparent 95%));
	border-color: color-mix(in srgb, var(--teal), transparent 70%);
	color: var(--teal);
}

.tag-teal:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--teal), transparent 75%), color-mix(in srgb, var(--teal), transparent 85%));
	border-color: color-mix(in srgb, var(--teal), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--teal), transparent 70%);
}

.tag-indigo {
	background: linear-gradient(135deg, color-mix(in srgb, var(--indigo), transparent 85%), color-mix(in srgb, var(--indigo), transparent 95%));
	border-color: color-mix(in srgb, var(--indigo), transparent 70%);
	color: var(--indigo);
}

.tag-indigo:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--indigo), transparent 75%), color-mix(in srgb, var(--indigo), transparent 85%));
	border-color: color-mix(in srgb, var(--indigo), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--indigo), transparent 70%);
}

.tag-lime {
	background: linear-gradient(135deg, color-mix(in srgb, var(--lime), transparent 85%), color-mix(in srgb, var(--lime), transparent 95%));
	border-color: color-mix(in srgb, var(--lime), transparent 70%);
	color: var(--lime);
}

.tag-lime:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--lime), transparent 75%), color-mix(in srgb, var(--lime), transparent 85%));
	border-color: color-mix(in srgb, var(--lime), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--lime), transparent 70%);
}

.tag-amber {
	background: linear-gradient(135deg, color-mix(in srgb, var(--amber), transparent 85%), color-mix(in srgb, var(--amber), transparent 95%));
	border-color: color-mix(in srgb, var(--amber), transparent 70%);
	color: var(--amber);
}

.tag-amber:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--amber), transparent 75%), color-mix(in srgb, var(--amber), transparent 85%));
	border-color: color-mix(in srgb, var(--amber), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--amber), transparent 70%);
}

.tag-slate {
	background: linear-gradient(135deg, color-mix(in srgb, var(--slate), transparent 85%), color-mix(in srgb, var(--slate), transparent 95%));
	border-color: color-mix(in srgb, var(--slate), transparent 70%);
	color: var(--slate);
}

.tag-slate:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--slate), transparent 75%), color-mix(in srgb, var(--slate), transparent 85%));
	border-color: color-mix(in srgb, var(--slate), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--slate), transparent 70%);
}

.tag-white {
	background: linear-gradient(135deg, color-mix(in srgb, var(--white), transparent 85%), color-mix(in srgb, var(--white), transparent 95%));
	border-color: color-mix(in srgb, var(--white), transparent 70%);
	color: var(--white);
}

.tag-white:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--white), transparent 75%), color-mix(in srgb, var(--white), transparent 85%));
	border-color: color-mix(in srgb, var(--white), transparent 50%);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--white), transparent 70%);
}


/* ===============================
        Categories
   =============================== */

.category {
	padding: 8px 16px;
	background: linear-gradient(135deg, rgba(0, 217, 255, 30%), rgba(0, 217, 255, 100%));
	border-radius: 10px;
	color: var(--white);
	font-size: 0.75rem;
	font-weight: 500;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: default;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.category:hover {
	box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
	transform: translateY(-2px);
}

/* 自訂顏色標籤 */
.category-custom {
	--category-color: var(--accent); /* Fallback */
	background: linear-gradient(135deg, color-mix(in srgb, var(--category-color), transparent 70%), color-mix(in srgb, var(--category-color), transparent 0%));
}

.category-custom:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--category-color), transparent 70%); /* 30% opacity */
}

/* ===============================
        Category 顏色變換
   =============================== */


.category-blue {
	background: linear-gradient(135deg, color-mix(in srgb, var(--blue), transparent 70%), color-mix(in srgb, var(--blue), transparent 0%));
}

.category-blue:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--blue), transparent 70%);
}

.category-cyan {
	background: linear-gradient(135deg, color-mix(in srgb, var(--cyan), transparent 70%), color-mix(in srgb, var(--cyan), transparent 0%));
}

.category-cyan:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--cyan), transparent 70%);
}

.category-green {
	background: linear-gradient(135deg, color-mix(in srgb, var(--green), transparent 70%), color-mix(in srgb, var(--green), transparent 0%));
}

.category-green:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--green), transparent 70%);
}

.category-orange {
	background: linear-gradient(135deg, color-mix(in srgb, var(--orange), transparent 70%), color-mix(in srgb, var(--orange), transparent 0%));
}

.category-orange:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--orange), transparent 70%);
}

.category-red {
	background: linear-gradient(135deg, color-mix(in srgb, var(--red), transparent 70%), color-mix(in srgb, var(--red), transparent 0%));
}

.category-red:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--red), transparent 70%);
}

.category-purple {
	background: linear-gradient(135deg, color-mix(in srgb, var(--purple), transparent 70%), color-mix(in srgb, var(--purple), transparent 0%));
}

.category-purple:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--purple), transparent 70%);
}

.category-yellow {
	background: linear-gradient(135deg, color-mix(in srgb, var(--yellow), transparent 70%), color-mix(in srgb, var(--yellow), transparent 0%));
}

.category-yellow:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--yellow), transparent 70%);
}

.category-pink {
	background: linear-gradient(135deg, color-mix(in srgb, var(--pink), transparent 70%), color-mix(in srgb, var(--pink), transparent 0%));
}

.category-pink:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--pink), transparent 70%);
}

.category-gray {
	background: linear-gradient(135deg, color-mix(in srgb, var(--gray), transparent 70%), color-mix(in srgb, var(--gray), transparent 0%));
}

.category-gray:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--gray), transparent 70%);
}

.category-brown {
	background: linear-gradient(135deg, color-mix(in srgb, var(--brown), transparent 70%), color-mix(in srgb, var(--brown), transparent 0%));
}


.category-brown:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--brown), transparent 70%);
}

.category-teal {
	background: linear-gradient(135deg, color-mix(in srgb, var(--teal), transparent 70%), color-mix(in srgb, var(--teal), transparent 0%));
}

.category-teal:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--teal), transparent 70%);
}

.category-indigo {
	background: linear-gradient(135deg, color-mix(in srgb, var(--indigo), transparent 70%), color-mix(in srgb, var(--indigo), transparent 0%));
}

.category-indigo:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--indigo), transparent 70%);
}

.category-lime {
	background: linear-gradient(135deg, color-mix(in srgb, var(--lime), transparent 70%), color-mix(in srgb, var(--lime), transparent 0%));
	color: #f768ad;
}

.category-lime:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--lime), transparent 70%);
}

.category-amber {
	background: linear-gradient(135deg, color-mix(in srgb, var(--amber), transparent 70%), color-mix(in srgb, var(--amber), transparent 0%));
}

.category-amber:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--amber), transparent 70%);
}

.category-slate {
	background: linear-gradient(135deg, color-mix(in srgb, var(--slate), transparent 70%), color-mix(in srgb, var(--slate), transparent 0%));
}

.category-slate:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--slate), transparent 70%);
}

.category-white {
	background: linear-gradient(135deg, color-mix(in srgb, var(--white), transparent 70%), color-mix(in srgb, var(--white), transparent 0%));
	color: #000000;
}

.category-white:hover {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--white), transparent 70%);
}



/* ===============================
        Colors
   =============================== */

/* 顏色選擇器 */
.color-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 12px;
}

.color-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s;
}

.color-option:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(0, 217, 255, 0.3);
}

.color-option input[type="radio"] {
	display: none;
}

.color-option input[type="radio"]:checked + .color-box {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.2);
	transform: scale(1.1);
}

.color-option input[type="radio"]:checked ~ .color-name {
	color: var(--accent);
	font-weight: 600;
}

.color-box {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	transition: all 0.3s;
}

.color-name {
	font-size: 0.85rem;
	color: var(--sys-text-muted);
	transition: all 0.3s;
}

/* 自訂顏色區域 */
.custom-color-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	gap: 12px;
}

.custom-color-option {
	flex: 0 0 auto;
}

.color-picker-input {
	width: 60px;
	height: 40px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s;
}

.color-picker-input:hover {
	border-color: var(--accent);
}




/* 歷史顏色區域 */
.color-history-section {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.color-label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sys-text);
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 12px;
}

.color-label i {
	color: var(--accent);
}

.color-history-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.history-color-item {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
}

.history-color-item:hover {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.2);
	transform: scale(1.1);
}

.history-color-item.selected {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.3);
}