/* ==========================================================================
   標籤、篩選膠囊、徽章 — 規格：設計系統畫布「元件 02」
   標籤：4px 圓角、不可點、資訊分類。膠囊：999px 圓角、可切換、固定 32px。
   徽章：圓形計數。
   ========================================================================== */

/* ---- 標籤（柔和底為預設） ---- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.tag-md {
    height: 28px;
    padding: 0 10px;
    font-size: var(--text-sm);
}

/* 柔和變體 */
.tag-primary {
    background: var(--color-primary-tint);
    border-color: var(--color-primary-tint);
    color: var(--color-primary);
}

.tag-success {
    background: var(--color-success-tint);
    border-color: var(--color-success-tint);
    color: var(--color-success-text);
}

.tag-warning {
    background: var(--color-warning-tint);
    border-color: var(--color-warning-tint);
    color: var(--color-warning-text);
}

.tag-danger {
    background: var(--color-danger-tint);
    border-color: var(--color-danger-tint);
    color: var(--color-danger-text);
}

.tag-info {
    background: var(--color-info-tint);
    border-color: var(--color-info-tint);
    color: var(--color-info-text);
}

/* 實心（狀態徽章：施工中、即將推出…） */
.tag-solid {
    background: var(--color-muted);
    border-color: var(--color-muted);
    color: var(--color-on-muted);
}

.tag-solid.tag-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.tag-solid.tag-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-on-success);
}

.tag-solid.tag-warning {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-on-warning);
}

.tag-solid.tag-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-on-danger);
}

.tag-solid.tag-info {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-on-info);
}

/* 輪廓 */
.tag-outline,
.tag-outline-primary,
.tag-outline-secondary,
.tag-outline-success,
.tag-outline-danger {
    background: transparent;
    border-color: var(--color-muted);
    color: var(--color-muted);
}

.tag-outline.tag-primary,
.tag-outline-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tag-outline.tag-success,
.tag-outline-success {
    border-color: var(--color-success);
    color: var(--color-success-text);
}

.tag-outline.tag-warning {
    border-color: var(--color-warning);
    color: var(--color-warning-text);
}

.tag-outline.tag-danger,
.tag-outline-danger {
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

.tag-outline.tag-info {
    border-color: var(--color-info);
    color: var(--color-info-text);
}

/* 狀態點 */
.tag-dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
}

.tag-pill {
    border-radius: var(--radius-full);
    padding-left: 10px;
    padding-right: 10px;
}

.tag-clickable {
    cursor: pointer;
}

.tag-clickable:hover {
    filter: brightness(0.95);
}

/* 群組 */
.tag-group,
.chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.tag-group-vertical {
    flex-direction: column;
    align-items: flex-start;
}

.tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tag-list li {
    margin: 0;
}

/* ---- 篩選膠囊（可切換） ---- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--control-sm);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}

.chip:hover {
    background: var(--color-primary-tint);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.chip:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--ring-primary);
}

.chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.chip.active:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-on-primary);
}

/* 啟用時前面畫一個勾（純 CSS，不用圖片） */
.chip.active::before {
    content: "";
    width: 8px;
    height: 5px;
    margin-top: -2px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}

.chip-sm {
    height: 28px;
    padding: 0 10px;
}

/* ---- 計數徽章 ---- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-neutral {
    background: var(--color-muted);
    color: var(--color-on-muted);
}

.badge-success {
    background: var(--color-success);
    color: var(--color-on-success);
}

.badge-warning {
    background: var(--color-warning);
    color: var(--color-on-warning);
}

.badge-danger {
    background: var(--color-danger);
    color: var(--color-on-danger);
}

.badge-positioned {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}

@media (max-width: 480px) {
    .tag-group,
    .chip-group {
        gap: var(--space-1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chip {
        transition: none;
    }

    .chip:hover {
        transform: none;
    }
}