/* ============================================================================= status-unify.css - ONE status chip, app-wide (CEO, Jul 27 2026). status.css defines the canonical glass pill (.st) and every NEW surface uses it. But older surfaces still carried their own flat, hardcoded status chips, so the same idea was drawn three or four different ways depending on the screen: .pill.success/.warning/.danger/.info Program sessions, Planner notifications .apv-badge--pending/approved/denied Approvals, My Requests .sh-badge.sh-ok/.sh-bad/.sh-wait Subsidy + status history timelines #subDetail .pp-pill Subsidy participation state This file gives all of them the SAME glass treatment and the SAME palette as .st, driven by the same `--c` custom property. Two deliberate decisions: 1) NO MARKUP WAS CHANGED. Every one of these chips keeps its existing class names and its existing C# helper (SessPill / NotifPill / StatusClass / Tone). That means no binding, no helper and no layout could break - the chips simply stop painting themselves and inherit the glass instead. 2) EACH CHIP KEEPS ITS OWN SIZE. A 10px uppercase badge in a dense timeline row and a 13px pill on a card are different densities on purpose; forcing one type size would reflow rows this pass cannot re-test. What is unified is the DESIGN - the glass, the palette, the radius, the dot - not the type scale. Loaded LAST, because mh-approvals.css / statusmenu.css / mh-subsidy.css all load after status.css and would otherwise win on source order at equal specificity. DELIBERATELY NOT TOUCHED (they are not record statuses, and making them look like one would be a lie): .pg-type the program TYPE chip (solid colour = the type's own identity) .pg-live the live-session pulse indicator (has its own animated dot) .kpi-delta a metric change (+/-), not a state #ppProfOv .pp-pill Profile overlay "Managed" / "PIN set" / "Current" - the SAME class name as the subsidy chip but a different, informational control. Scoped out on purpose; do not widen the selector. .icf.pill.country the CountryFilter / "All types" TRIGGER. It carries BOTH .icf and .pill, so the first draft of this file turned a dropdown into a status chip. Every selector here is :not(.icf) for that reason: a chip that is also a FIELD is a control, never a status. .tm-* / .chip / .fbi-chip / .wl-step / filter + segmented controls ============================================================================= */ /* ---- the palette: semantic classes mapped onto the DATABASE CONTRACT's seven hues, so a chip that has no lkp row (a document-status chip, a session pill) draws the SAME green/amber/blue as a chip that does. `danger` maps to on_hold clay because the contract defines no red - flagged in Migration_StatusPills_Contract.sql. ---- */ .mh-app .pill.success, .mh-app .apv-badge--approved, .mh-app .sh-badge.sh-ok { --c:#3E6B57; } .mh-app .pill.warning, .mh-app .apv-badge--pending, .mh-app .sh-badge.sh-wait { --c:#A67820; } .mh-app .pill.danger, .mh-app .apv-badge--denied, .mh-app .sh-badge.sh-bad { --c:#B8623A; } .mh-app .pill.info { --c:#4C5F86; } .mh-app .pill, .mh-app .apv-badge, .mh-app .apv-badge--muted, .mh-app .sh-badge, .mh-app .sh-badge.sh-muted { --c:#677579; } /* re-assert the variants: the neutral group above must not out-order them */ .mh-app .pill.success { --c:#3E6B57; } .mh-app .pill.warning { --c:#A67820; } .mh-app .pill.danger { --c:#B8623A; } .mh-app .pill.info { --c:#4C5F86; } .mh-app .apv-badge--approved { --c:#3E6B57; } .mh-app .apv-badge--pending { --c:#A67820; } .mh-app .apv-badge--denied { --c:#B8623A; } .mh-app .sh-badge.sh-ok { --c:#3E6B57; } .mh-app .sh-badge.sh-wait { --c:#A67820; } .mh-app .sh-badge.sh-bad { --c:#B8623A; } /* ---- the glass, light surfaces. Same formula as .st--glass in status.css ---- */ .mh-app .pill:not(.icf), .mh-app .apv-badge, .mh-app .sh-badge, .mh-app #subDetail .pp-pill{ background: color-mix(in srgb, var(--c) 20%, rgba(255,255,255,.55)) !important; -webkit-backdrop-filter: blur(8px) saturate(1.5); backdrop-filter: blur(8px) saturate(1.5); border: 1px solid rgba(255,255,255,.65); color: color-mix(in srgb, var(--c) 80%, #15201d) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); border-radius: 999px; } /* the leading dot each of these already renders takes the status colour */ .mh-app .pill:not(.icf) .dot, .mh-app #subDetail .pp-pill .pp-dot{ background: var(--c) !important; } /* ---- the glass, dark page ---- */ body.dark .mh-app .pill:not(.icf), body.dark .mh-app .apv-badge, body.dark .mh-app .sh-badge, body.dark .mh-app #subDetail .pp-pill{ background: color-mix(in srgb, var(--c) 30%, rgba(255,255,255,.06)) !important; border: 1px solid color-mix(in srgb, var(--c) 32%, rgba(255,255,255,.16)); color: color-mix(in srgb, var(--c) 46%, #ffffff) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } body.dark .mh-app .pill:not(.icf) .dot, body.dark .mh-app #subDetail .pp-pill .pp-dot{ background: color-mix(in srgb, var(--c) 70%, #fff) !important; box-shadow: 0 0 8px var(--c); } /* ---- the wizard rail keeps its own neutral chip (a relationship is not a status), and it sits on pine in both themes, so it must not take the light glass. ---- */ .mh-app :is(#clWiz,#clMbr) .pv-status .pill, body.dark .mh-app :is(#clWiz,#clMbr) .pv-status .pill{ background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.18); color: #EAF2EE !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } .mh-app :is(#clWiz,#clMbr) .pv-status .pill .dot{ background: rgba(255,255,255,.75) !important; } /* ============================================================================= THE PREPARED PILL - DESIGN CONTRACT (CEO, Jul 28 2026) Source: _handoff/Database Status Pills new/Program Wizards/Status Pills.html (the SMALL version). This restyles the canonical .st AND the legacy families to the contract's exact recipe, so every status chip in the app is that pill. The mock drives each pill from TWO authored values: --ph (the hue as an "r,g,b" triplet, for rgba()) and --pi / --pid (the light / dark ink). Our pills carry ONE value - `--c`, the ColorHex the database owns - because a single source of colour is what lets a status look the same on every screen. Every rgba(var(--ph),X) in the contract is therefore written here as color-mix(in srgb, var(--c) X%, transparent), which is the same colour by definition, and the two inks are derived from the hue (75% toward black for light, 50% toward white for dark) - measured against the mock's published inks, that lands within a few units on all seven. ============================================================================= */ .mh-app .st, .mh-app .pill:not(.icf), .mh-app .apv-badge, .mh-app .sh-badge, .mh-app #subDetail .pp-pill{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.3)), color-mix(in srgb, var(--c) 13%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 22%, transparent) !important; color:color-mix(in srgb, var(--c) 75%, #000) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(40,60,80,.05), 0 8px 18px -12px color-mix(in srgb, var(--c) 70%, transparent) !important; -webkit-backdrop-filter:blur(12px) saturate(165%); backdrop-filter:blur(12px) saturate(165%); border-radius:999px; } /* the dot is the hue itself, with the contract's soft halo */ .mh-app .st .st-dot, .mh-app .pill:not(.icf) .dot, .mh-app #subDetail .pp-pill .pp-dot{ background:var(--c) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent) !important; } /* ---- dark PAGE: raise the veil, lift the ink (the contract's dark block) ---- */ body.dark .mh-app .st--glass, body.dark .mh-app .pill:not(.icf), body.dark .mh-app .apv-badge, body.dark .mh-app .sh-badge, body.dark .mh-app #subDetail .pp-pill{ background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)), color-mix(in srgb, var(--c) 24%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 42%, transparent) !important; color:color-mix(in srgb, var(--c) 50%, #fff) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -12px rgba(0,0,0,.7) !important; } body.dark .mh-app .st--glass .st-dot, body.dark .mh-app .pill:not(.icf) .dot, body.dark .mh-app #subDetail .pp-pill .pp-dot{ background:color-mix(in srgb, var(--c) 50%, #fff) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent) !important; } /* ---- STRONG - the contract's detail-header variant, verbatim from the mock's Variants section: "Filled. One per screen - the record's own status in the detail header." That is EXACTLY what .st--hero is for (the DetailShell heroes and the New Client wizard rail), so the hero pill is now the contract's .pill.strong recipe - solid hue, white ink, white dot - instead of the dark-glass approximation I had invented, which is why the list pill and the hero pill did not look like the same design system. `rgb(var(--ph))` -> `var(--c)` (the hue itself, opaque) and `rgba(var(--ph),.9)` -> color-mix(... 90%, transparent), same colour. ONE DELIBERATE DEVIATION, and the reason: the mock's dark theme sets `.pill.strong{color:#12201B}` because there the whole PAGE goes dark. Our hero sits on the pine rail, which is dark in BOTH themes - the rail never flips - so the ink stays #fff in both. Near-black ink on a mid-tone hue would drop this pill to roughly 2.5:1. ---- */ .mh-app .st--hero, .mh-app .st--glass.st--ondark, body.dark .mh-app .st--hero, body.dark .mh-app .st--glass.st--ondark{ background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0)), var(--c) !important; border:1px solid color-mix(in srgb, var(--c) 90%, transparent) !important; color:#fff !important; box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 10px 22px -12px color-mix(in srgb, var(--c) 90%, transparent) !important; } .mh-app .st--hero .st-dot, .mh-app .st--glass.st--ondark .st-dot, body.dark .mh-app .st--hero .st-dot, body.dark .mh-app .st--glass.st--ondark .st-dot{ background:#fff !important; box-shadow:0 0 0 3px rgba(255,255,255,.28) !important; } /* the QR pass card is fixed-light in both themes - it keeps the light recipe */ .mh-app .st--onlight, body.dark .mh-app .st--onlight{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.3)), color-mix(in srgb, var(--c) 13%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 22%, transparent) !important; color:color-mix(in srgb, var(--c) 75%, #000) !important; } .mh-app .st--onlight .st-dot, body.dark .mh-app .st--onlight .st-dot{ background:var(--c) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent) !important; } /* ============================================================================= THE FAMILY I MISSED - `.status` + `.st-*` (CEO, Jul 28 2026) A SECOND status-chip system, invisible to the first sweep because its selectors are `.status` + `.st-active` etc. - not `.pill` / `.apv-badge` / `.sh-badge` / `.st`. `.st` and `.st-active` look alike but are unrelated: one is the canonical pill, the other is a modifier on `.status`. Defined in THREE files: mh-theme.css .st-active/.st-intake/.st-review/.st-hold/.st-arch (global) mh-admin.css .st-active/.st-inactive (Admin users) mh-feedback.css .fbi-chip.st-new/.st-review/.st-resolved/.st-dismissed (Admin feedback) In the CEO's named scope - Clients (document expiry "Days Left"), Admin (users directory, feedback inbox). The KIOSK also renders `.status`, but it is served under EmptyLayout, OUTSIDE `.mh-app`, so none of these rules reach it - it keeps its own fixed-stage design, deliberately. NOT TOUCHED here: `.fbi-cat` (a feedback CATEGORY, not a status) and every Teams chip - the CEO confirmed the Teams pills are already right. ============================================================================= */ /* ---- hue per variant, from the contract ---- */ .mh-app .status.st-active { --c:#3E6B57; } .mh-app .status.st-inactive { --c:#677579; } .mh-app .status.st-arch { --c:#7A6B83; } .mh-app .status.st-intake { --c:#A67820; } .mh-app .status.st-review { --c:#A67820; } .mh-app .status.st-hold { --c:#B8623A; } .mh-app .fbi-chip.st-new { --c:#3E6B57; } .mh-app .fbi-chip.st-review { --c:#A67820; } .mh-app .fbi-chip.st-resolved { --c:#4C5F86; } .mh-app .fbi-chip.st-dismissed { --c:#677579; } /* ---- the contract's glass, light ---- */ .mh-app .status[class*="st-"], .mh-app .fbi-chip.st-new, .mh-app .fbi-chip.st-review, .mh-app .fbi-chip.st-resolved, .mh-app .fbi-chip.st-dismissed{ background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.3)), color-mix(in srgb, var(--c) 13%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 22%, transparent) !important; color:color-mix(in srgb, var(--c) 75%, #000) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(40,60,80,.05), 0 8px 18px -12px color-mix(in srgb, var(--c) 70%, transparent) !important; -webkit-backdrop-filter:blur(12px) saturate(165%); backdrop-filter:blur(12px) saturate(165%); border-radius:999px; } /* these chips draw their dot with `background:currentColor`, which would make it the INK. The contract's dot is the HUE itself, with the soft halo. */ .mh-app .status[class*="st-"] .dot, .mh-app .fbi-chip[class*="st-"] .dot{ background:var(--c) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent) !important; } /* ---- the contract's glass, dark page ---- */ body.dark .mh-app .status[class*="st-"], body.dark .mh-app .fbi-chip.st-new, body.dark .mh-app .fbi-chip.st-review, body.dark .mh-app .fbi-chip.st-resolved, body.dark .mh-app .fbi-chip.st-dismissed{ background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)), color-mix(in srgb, var(--c) 24%, transparent) !important; border:1px solid color-mix(in srgb, var(--c) 42%, transparent) !important; color:color-mix(in srgb, var(--c) 50%, #fff) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 18px -12px rgba(0,0,0,.7) !important; } body.dark .mh-app .status[class*="st-"] .dot, body.dark .mh-app .fbi-chip[class*="st-"] .dot{ background:color-mix(in srgb, var(--c) 50%, #fff) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent) !important; }