/*
 * Status badge (WP9; UI-Design-Principles Sec. 6/9). Dot glyph + text — the single
 * state indicator in the whole system. Colour is NEVER the sole carrier: the glyph
 * and the label always accompany it (Sec. 9).
 *
 * Class schema: gtx-badge, gtx-badge--<status> (ok|warn|danger|idle|info),
 * gtx-badge__dot, gtx-badge__label.
 */

.gtx-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gtx-s2);
    padding: 2px var(--gtx-s2);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-s);
    background: var(--gtx-surface-2);
    font-size: var(--gtx-fs-meta);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.gtx-badge__dot {
    font-size: 0.9em;
    line-height: 1;
}

.gtx-badge__label {
    color: var(--gtx-text);
}

.gtx-badge--ok { color: var(--gtx-ok); }
.gtx-badge--warn { color: var(--gtx-warn); }
.gtx-badge--danger { color: var(--gtx-danger); }
.gtx-badge--idle { color: var(--gtx-idle); }
.gtx-badge--info { color: var(--gtx-info); }

/* The dot takes the status colour; the label stays high-contrast text. */
.gtx-badge--ok .gtx-badge__dot { color: var(--gtx-ok); }
.gtx-badge--warn .gtx-badge__dot { color: var(--gtx-warn); }
.gtx-badge--danger .gtx-badge__dot { color: var(--gtx-danger); }
.gtx-badge--idle .gtx-badge__dot { color: var(--gtx-idle); }
.gtx-badge--info .gtx-badge__dot { color: var(--gtx-info); }