/* ===============================
        System badge layout
   =============================== */

.badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	width: 100%;
}

.badge {
	background: rgba(255, 255, 255, 0.05);
	color: var(--white);
	padding: 4px 12px;
	border-radius: 6px;
	font-size: 0.75rem;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: fit-content;
}

.badge-blue {
	background: rgba(59, 130, 246, 0.15);
	color: var(--blue-light);
}

.badge-cyan {
	background: rgba(6, 182, 212, 0.15);
	color: var(--cyan-light);
}

.badge-green {
	background: rgba(16, 185, 129, 0.15);
	color: var(--green-light);
}

.badge-orange {
	background: rgba(245, 158, 11, 0.15);
	color: var(--orange-light);
}

.badge-red {
	background: rgba(239, 68, 68, 0.15);
	color: var(--red-light);
}


.badge-draft {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
	color: var(--white);
}

.badge-pending {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.2));
	color: var(--orange);
}

.badge-active {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2));
	color: var(--green);
}

.badge-expired {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.2));
	color: var(--red);
}

.badge-terminated {
	background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(203, 213, 225, 0.2));
	color: var(--sys-text-muted);
}

.badge-success {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.2));
	color: var(--green);
}

.badge-danger {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(248, 113, 113, 0.2));
	color: var(--red);
}

.badge-warning {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
	color: var(--orange);
}

.badge-maintenance {
	background: linear-gradient(135deg, rgba(255, 152, 0, 0.2), rgba(255, 193, 7, 0.2));
	color: var(--orange);
}


/* 操作類型 Badge 樣式 */
.badge.action-create {background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);}
.badge.action-update {background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);}
.badge.action-delete {background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);}
.badge.action-view {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
.badge.action-download {background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);}
.badge.action-upload {background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);}
.badge.action-export {background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);}
.badge.action-import {background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%);}
.badge.action-login {background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);} /* 使用類似 resolved 的藍色系，代表進入/成功 */
.badge.action-other {background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);}


/* 狀態 Badge 樣式 */
.badge.status-new {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}
.badge.status-investigating {background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);}
.badge.status-resolved {background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);}
.badge.status-ignored {background: linear-gradient(135deg, #a8a8a8 0%, #6c6c6c 100%);}
.badge.status-unknown {background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);}
.badge.status-draft {background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);}
.badge.status-inactive {background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);}
.badge.status-active {background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);}
.badge.status-pending {background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);}
.badge.status-expired {background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);}
.badge.status-completed {background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);}

/* 數量 Badge 樣式 */
.badge.count {background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);}