/* Badges shared by the admin and client screens. Keep labels readable at narrow widths. */
.shell .count-badge,
.shell .safe-badge,
.shell .version-badge,
.shell .account-state,
.shell .status,
.shell .source,
.shell .audit-outcome,
.shell .env-badge,
.shell .client-access-key-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

.shell .count-badge,
.shell .version-badge,
.shell .source {
    border: 1px solid hsl(var(--border));
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.shell .safe-badge,
.shell .account-state.active,
.shell .status.PAID,
.shell .status.COMPLETED,
.shell .status.paid,
.shell .status.completed,
.shell .source.signed_api,
.shell .source.authenticated_webhook,
.shell .audit-outcome.ok {
    border: 1px solid var(--success);
    background: var(--success-soft);
    color: var(--success-text);
}

.shell .status.CREATING,
.shell .status.WAITING_PAYMENT,
.shell .status.PROCESSING,
.shell .status.UNKNOWN,
.shell .status.PARTIALLY_COMPLETED,
.shell .status.creating,
.shell .status.waiting_payment,
.shell .status.processing,
.shell .status.unknown,
.shell .status.partially_completed,
.shell .audit-outcome.denied {
    border: 1px solid var(--warning);
    background: var(--warning-soft);
    color: var(--warning-text);
}

.shell .account-state.inactive,
.shell .status.FAILED,
.shell .status.EXPIRED,
.shell .status.failed,
.shell .status.expired,
.shell .audit-outcome.error {
    border: 1px solid var(--danger);
    background: var(--danger-soft);
    color: var(--danger-text);
}

.shell .env-badge { margin-left: 6px; }
.shell .env-badge.production {
    border: 1px solid hsl(var(--primary) / .35);
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
}
.shell .env-badge.sandbox {
    border: 1px dashed hsl(var(--border));
    background: hsl(var(--muted) / .5);
    color: hsl(var(--muted-foreground));
}

.shell .account-state::before,
.shell .status::before,
.shell .audit-outcome::before {
    flex: 0 0 6px;
}

.shell .client-title-row,
.shell .client-tabs-name,
.shell .entity-context,
.shell .client-provider-card-heading,
.shell .provider-balance-name {
    min-width: 0;
}

.shell #reversals .reversal-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.shell #reversals .reversal-badge.pending {
    border-color: var(--warning);
    background: var(--warning-soft);
    color: var(--warning-text);
}

@media (max-width: 640px) {
    .shell .client-title-row .account-state,
    .shell .client-title-row .env-badge {
        margin-left: 0;
    }
    .shell .entity-context > .account-state,
    .shell .entity-context > .count-badge {
        margin-left: 0;
    }
}