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

/* 標籤網格 */
/* 標籤網格 - 改回 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);
}



/* ===============================
        Tag 基礎樣式 (方案 A：暗調微光標籤)
   =============================== */

.tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 11px;
	border-radius: 14px;
	font-size: 0.84rem;
	font-weight: 500;
	background: rgba(15, 23, 42, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #94a3b8;
	letter-spacing: 0.3px;
	backdrop-filter: blur(8px);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: default;
}

.tag::before {
	content: '#';
	color: var(--tag-color, var(--cyan));
	font-weight: 700;
	font-size: 0.82rem;
	margin-right: 1px;
}

.tag:hover {
	border-color: var(--tag-color, var(--cyan));
	background: rgba(255, 255, 255, 0.08);
	color: #f1f5f9;
	transform: translateY(-1px);
	box-shadow: 0 0 10px color-mix(in srgb, var(--tag-color, var(--cyan)), transparent 60%);
}

/* 自訂顏色標籤 */
.tag-custom {
	--tag-color: var(--accent, #00d9ff);
}

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

.tag-blue   { --tag-color: #38bdf8; }
.tag-cyan   { --tag-color: #00d9ff; }
.tag-green  { --tag-color: #22c55e; }
.tag-orange { --tag-color: #fb923c; }
.tag-red    { --tag-color: #f87171; }
.tag-purple { --tag-color: #c084fc; }
.tag-yellow { --tag-color: #facc15; }
.tag-pink   { --tag-color: #f472b6; }
.tag-gray   { --tag-color: #94a3b8; }
.tag-brown  { --tag-color: #a8715a; }
.tag-teal   { --tag-color: #2dd4bf; }
.tag-indigo { --tag-color: #818cf8; }
.tag-lime   { --tag-color: #a3e635; }
.tag-amber  { --tag-color: #f59e0b; }
.tag-slate  { --tag-color: #94a3b8; }
.tag-white  { --tag-color: #ffffff; }

/* 勾選時的選中態 */
.tag-checkbox:checked + .tag,
.tag-radio:checked + .tag {
	border-color: var(--tag-color, var(--cyan));
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	box-shadow: 0 0 12px color-mix(in srgb, var(--tag-color, var(--cyan)), transparent 50%);
}

/* ===============================
        Category 基礎樣式 (方案 A：微光圓點膠囊)
   =============================== */

.category {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4.5px 13px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.09);
	color: rgba(226, 232, 240, 0.95);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	backdrop-filter: blur(8px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: default;
}

.category::before {
	content: '';
	display: inline-block;
	width: 7.5px;
	height: 7.5px;
	border-radius: 50%;
	background-color: var(--category-color, var(--cyan));
	box-shadow: 0 0 8px var(--category-color, var(--cyan));
	flex-shrink: 0;
}

.category:hover {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* 自訂顏色分類 */
.category-custom {
	--category-color: var(--accent, #00d9ff);
}

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

.category-blue   { --category-color: #38bdf8; }
.category-cyan   { --category-color: #00d9ff; }
.category-green  { --category-color: #22c55e; }
.category-orange { --category-color: #fb923c; }
.category-red    { --category-color: #f87171; }
.category-purple { --category-color: #c084fc; }
.category-yellow { --category-color: #facc15; }
.category-pink   { --category-color: #f472b6; }
.category-gray   { --category-color: #94a3b8; }
.category-brown  { --category-color: #a8715a; }
.category-teal   { --category-color: #2dd4bf; }
.category-indigo { --category-color: #818cf8; }
.category-lime   { --category-color: #a3e635; }
.category-amber  { --category-color: #f59e0b; }
.category-slate  { --category-color: #94a3b8; }
.category-white  { --category-color: #ffffff; }

/* 勾選時的選中態 */
.category-checkbox:checked + .category,
.category-radio:checked + .category {
	border-color: var(--category-color, var(--cyan));
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	box-shadow: 0 0 12px color-mix(in srgb, var(--category-color, var(--cyan)), transparent 50%);
}

/* ===============================
        Technology 技術標籤樣式 (代碼晶片風格)
   =============================== */

.tech-badge,
.tech-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	background: rgba(0, 217, 255, 0.06);
	border: 1px solid rgba(0, 217, 255, 0.22);
	border-radius: 6px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--cyan, #00d9ff);
	letter-spacing: 0.3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(4px);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: default;
}

.tech-badge::before,
.tech-tag::before {
	content: '\f1b2'; /* FontAwesome fa-cube */
	font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', sans-serif;
	font-weight: 900;
	font-size: 0.72rem;
	color: rgba(0, 217, 255, 0.8);
	transition: transform 0.25s ease;
}

.tech-badge:hover,
.tech-tag:hover {
	background: rgba(0, 217, 255, 0.15);
	border-color: var(--cyan, #00d9ff);
	box-shadow: 0 0 12px rgba(0, 217, 255, 0.35);
	color: #ffffff;
	transform: translateY(-1.5px);
}

.tech-badge:hover::before,
.tech-tag:hover::before {
	transform: rotate(15deg) scale(1.1);
	color: #ffffff;
}



/* ===============================
        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);
}