/* Shared badge contract. Legacy class names remain valid for live status polling.
   This file owns badge geometry/tone; feature styles own placement only. */
:root {
    --ui-badge-font:12px; --ui-badge-line:18px; --ui-badge-height:30px;
    --ui-badge-radius:999px; --ui-badge-gap:6px;
    --ui-neutral-bg:#eef2f1; --ui-neutral-border:#cbd5d2; --ui-neutral-text:#52655e;
    --ui-success-bg:#e4f5e9; --ui-success-border:#afd6bb; --ui-success-text:#28613c;
    --ui-warning-bg:#fff4dc; --ui-warning-border:#e4cc96; --ui-warning-text:#765516;
    --ui-danger-bg:#fff0ee; --ui-danger-border:#dfb5af; --ui-danger-text:#943c34;
    --ui-info-bg:#eaf0fc; --ui-info-border:#bccded; --ui-info-text:#355c96;
    --ui-accent-bg:#f1ecfa; --ui-accent-border:#d4c5e9; --ui-accent-text:#67468d;
}
.console-body .app-content :is(
    .ui-badge, .status, .device-source-badge, .dashboard-role-badge,
    .rule-runtime, .rule-tags>em, .rule-delivery-summary>em, .rule-yolo-badges>span,
    .rule-targets>span, .rule-event-badge, .retention-badge, .license-state,
    .two-factor-state, .evidence-source-badge, .semantic-score-badge, .event-flag-badge,
    .image-stat-badge, .view-mode-badge, .view-meta-badge, .view-card-counts .preview-status,
    .configuration-sync, .connection-incident-state, .upload-state, .chip-row>span
),
.marketing-body :is(.ui-badge, .status, .chip-row>span),
.public-flag .color {
    box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center;
    vertical-align:middle; gap:var(--ui-badge-gap); width:fit-content; max-width:100%; min-width:0;
    min-height:var(--ui-badge-height); margin:0; padding:5px 10px;
    border:1px solid var(--ui-badge-border,var(--ui-neutral-border)); border-radius:var(--ui-badge-radius);
    background:var(--ui-badge-bg,var(--ui-neutral-bg)); color:var(--ui-badge-text,var(--ui-neutral-text));
    font-family:inherit; font-size:var(--ui-badge-font); font-weight:600; font-style:normal;
    line-height:var(--ui-badge-line); letter-spacing:0; text-transform:none;
    text-decoration:none; text-align:start; white-space:normal; overflow-wrap:anywhere;
    box-shadow:none; flex-shrink:1;
}
/* Compact metadata uses the same typography, just less vertical padding. */
.console-body .app-content :is(.view-meta-badge, .view-card-counts .preview-status,
    .rule-event-badge, .rule-tags>em, .rule-delivery-summary>em, .rule-yolo-badges>span,
    .evidence-source-badge, .semantic-score-badge, .event-flag-badge, .image-stat-badge, .ui-badge.is-compact) {
    min-height:28px; padding:4px 9px;
}
.console-body .app-content :is(.status.connected, .status.ready, .device-source-badge.kvm, .view-meta-badge.rule,
    .rule-runtime.on, .rule-tags>.valid, .delivery-state.active, .license-state.active,
    .two-factor-state.enabled, .retention-badge.verified, .view-mode-badge.full,
    .configuration-sync[data-state=applied], .connection-incident-state.recovered,
    .event-flag-badge.flag-green, .evidence-source-badge.source-rule, .ui-badge[data-tone=success]),
.public-flag .color.green {
    --ui-badge-bg:var(--ui-success-bg); --ui-badge-border:var(--ui-success-border); --ui-badge-text:var(--ui-success-text);
}
.console-body .app-content :is(.status.pending, .status.connecting, .status.warning,
    .delivery-state.paused, .rule-tags>.needs-input, .license-state.expiring,
    .configuration-sync[data-state=pending], .configuration-sync[data-state=received],
    .connection-incident-state.recovering, .view-card-counts .preview-status.delayed,
    .event-flag-badge.flag-yellow, .view-mode-badge.health, .ui-badge[data-tone=warning]),
.public-flag .color.yellow {
    --ui-badge-bg:var(--ui-warning-bg); --ui-badge-border:var(--ui-warning-border); --ui-badge-text:var(--ui-warning-text);
}
.console-body .app-content :is(.status.failed, .status.error, .delivery-state.unavailable,
    .configuration-sync[data-state=failed], .connection-incident-state.open,
    .view-card-counts .preview-status.interrupted, .event-flag-badge.flag-red, .ui-badge[data-tone=danger]),
.public-flag .color.red {
    --ui-badge-bg:var(--ui-danger-bg); --ui-badge-border:var(--ui-danger-border); --ui-badge-text:var(--ui-danger-text);
}
.console-body .app-content :is(.device-source-badge.rtsp, .view-meta-badge.event, .rule-event-badge,
    .evidence-source-badge.source-system, .ui-badge[data-tone=info]) {
    --ui-badge-bg:var(--ui-info-bg); --ui-badge-border:var(--ui-info-border); --ui-badge-text:var(--ui-info-text);
}
.console-body .app-content :is(.evidence-source-badge.source-keyframe, .semantic-score-badge, .rule-targets>span, .ui-badge[data-tone=accent]) {
    --ui-badge-bg:var(--ui-accent-bg); --ui-badge-border:var(--ui-accent-border); --ui-badge-text:var(--ui-accent-text);
}
/* Intentional inactivity is not a fault. Mutating Disable buttons remain red. */
.console-body .app-content :is(.status.disabled, .status.stopped, .rule-runtime.off,
    .two-factor-state.disabled, .license-state.expired, .license-state.revoked,
    .view-mode-badge.disabled, .device-source-badge.shared, .rule-yolo-badges>.yolo-inactive,
    .connection-incident-state.unknown, .connection-incident-state.stopped) {
    --ui-badge-bg:var(--ui-neutral-bg); --ui-badge-border:var(--ui-neutral-border); --ui-badge-text:var(--ui-neutral-text);
}
.console-body .app-content .connection-service-status:is([data-shared-state=ready],[data-shared-state=available]) .status,
.console-body .app-content .upload-delivery-status[data-upload-state=available] .upload-state {
    --ui-badge-bg:var(--ui-success-bg); --ui-badge-border:var(--ui-success-border); --ui-badge-text:var(--ui-success-text);
}
.console-body .app-content .connection-service-status[data-shared-state=preparing] .status,
.console-body .app-content .upload-delivery-status:not([data-upload-state=available]) .upload-state {
    --ui-badge-bg:var(--ui-warning-bg); --ui-badge-border:var(--ui-warning-border); --ui-badge-text:var(--ui-warning-text);
}
.console-body .app-content .connection-service-status:is([data-shared-state=attention],[data-shared-state=offline]) .status {
    --ui-badge-bg:var(--ui-danger-bg); --ui-badge-border:var(--ui-danger-border); --ui-badge-text:var(--ui-danger-text);
}
.console-body .app-content .connection-service-status:is([data-shared-state=revoked],[data-shared-state=paused]) .status {
    --ui-badge-bg:var(--ui-neutral-bg); --ui-badge-border:var(--ui-neutral-border); --ui-badge-text:var(--ui-neutral-text);
}
.console-body .app-content :is(.rule-runtime,.configuration-sync)>i,
.console-body .app-content .dashboard-role-badge::before {
    width:6px; height:6px; flex:0 0 6px; border-radius:50%; margin:0; background:currentColor; box-shadow:none;
}
.console-body .app-content :is(.view-meta-badge,.image-stat-badge)>b {font:inherit;font-weight:700}
.console-body .app-content :is(.view-meta-icon,.image-metric-icon) {
    display:inline-grid; place-items:center; flex:0 0 16px; width:16px; height:16px;
    border:0; border-radius:0; background:none; color:inherit; font-size:16px; line-height:1;
}
.console-body .app-content :is(.source-summary,.device-card-meta,.event-card-meta,.event-statuses,
    .rule-tags,.rule-delivery-summary,.rule-yolo-badges,.chip-row,.view-workspace-state) {
    align-items:center; flex-wrap:wrap; gap:8px;
}
.console-body .app-content .rule-clean-metrics {align-items:center}
.console-body .app-content .rule-clean-heading .rule-runtime {margin:0}
/* Navigable counts still look like metadata, with a clear keyboard focus. */
.console-body .app-content a:is(.ui-badge,.view-meta-badge,.rule-event-badge,.status):is(:hover,:focus-visible) {
    text-decoration:none; border-color:currentColor; filter:brightness(.97);
}
.console-body .app-content a:is(.ui-badge,.view-meta-badge,.rule-event-badge,.status):focus-visible,
.console-body .app-content .view-card-counts .preview-status:focus-visible {
    outline:2px solid #287447; outline-offset:3px;
}
.console-body .app-content [hidden] {display:none!important}
.marketing-body {--ui-neutral-bg:#152b32;--ui-neutral-border:#3c5459;--ui-neutral-text:#d6e3e3}

@media(forced-colors:active) {
    .console-body .app-content :is(.status,[class*="-badge"],.rule-runtime,.configuration-sync,.license-state,.connection-incident-state,.upload-state) {
        border-color:CanvasText; background:Canvas; color:CanvasText;
    }
}