/* Partial: _status-badges.css.j2 — Status badges (draft/active/deprecated/proposed) + change indicator */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.draft {
    background: var(--status-draft-bg);
    color: var(--status-draft-text);
}

.status-badge.active {
    background: var(--status-active-bg);
    color: var(--status-active-text);
}

.status-badge.deprecated {
    background: var(--status-deprecated-bg);
    color: var(--status-deprecated-text);
}

.status-badge.proposed {
    background: var(--status-proposed-bg);
    color: var(--status-proposed-text);
}

/* Validation-quality color overrides for Active status badges */
.status-badge.active.val-green {
    background: var(--val-green-bg);
    color: var(--val-green-text);
}

.status-badge.active.val-yellow-green {
    background: var(--val-yellow-green-bg);
    color: var(--val-yellow-green-text);
}

.status-badge.active.val-yellow {
    background: var(--val-yellow-bg);
    color: var(--val-yellow-text);
}

.status-badge.active.val-red {
    background: var(--val-red-bg);
    color: var(--val-red-text);
}

.status-badge.active.val-orange {
    background: var(--val-orange-bg);
    color: var(--val-orange-text);
}

/* Delayed hover tooltip for validation-colored badges */
.status-badge[data-tip] {
    position: relative;
}

.status-badge[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity 0.15s ease 1s;
}

.status-badge[data-tip]:hover::after {
    opacity: 1;
}

.change-indicator {
    color: var(--change-color);
    font-size: 0.75rem;
}
.change-indicator.unsaved {
    color: var(--primary);
}
.change-indicator.uncommitted {
    color: var(--warning-text);
}
