diff --git a/modules/rflows/components/flows.css b/modules/rflows/components/flows.css index 7f1f384..aeb3415 100644 --- a/modules/rflows/components/flows.css +++ b/modules/rflows/components/flows.css @@ -756,18 +756,13 @@ min-width: 40px; text-align: right; } -/* Derived threshold info */ -.icp-derived-info { - margin-top: 6px; padding: 6px 0 0; - border-top: 1px solid var(--rs-border-subtle); -} -.icp-derived-row { - display: flex; align-items: center; gap: 6px; - font-size: 10px; color: var(--rs-text-secondary); margin-bottom: 3px; -} -.icp-derived-dot { - width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; -} +/* Threshold color bar */ +.icp-threshold-bar-wrap { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rs-border-subtle); } +.icp-threshold-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 1px; } +.icp-threshold-seg--red { background: var(--rflows-status-critical, #ef4444); } +.icp-threshold-seg--yellow { background: var(--rflows-status-sustained, #eab308); } +.icp-threshold-seg--green { background: var(--rflows-status-thriving, #10b981); } +.icp-threshold-labels { display: flex; justify-content: space-between; font-size: 9px; color: var(--rs-text-muted); margin-top: 2px; } /* Analytics bars */ .icp-analytics-row { diff --git a/modules/rflows/components/folk-flows-app.ts b/modules/rflows/components/folk-flows-app.ts index 7b08297..e0daa70 100644 --- a/modules/rflows/components/folk-flows-app.ts +++ b/modules/rflows/components/folk-flows-app.ts @@ -2873,13 +2873,20 @@ class FolkFlowsApp extends HTMLElement {