/* HEROKU REBUILD GOTCHA: A Tailwind class that appears ONLY in app/views/**.erb can silently fail to compile on deploy. The Ruby buildpack's asset-change detection watches app/assets (not app/views), so a view-only change may skip assets:precompile and reuse the cached CSS — the new utility class then won't exist in production even though the markup references it. If a class isn't taking effect after a deploy, force a Tailwind rebuild: edit this file (any change) or run `heroku repo:purge_cache -a advokate`, then redeploy. See CLAUDE.md -> Production Notes. (cache-bust marker: 2026-06-24b — force assets:precompile so the Klean Analysis "Follow up" section's emphasis classes (shadow-xl, ring-brand-mint/40, bg-brand-mint/10, w-44, w-72, divide-y) land in production) */ @tailwind base; @tailwind components; @tailwind utilities; /* Brand palette variables. :root holds the Advokate (default) values; the .brand-planifi class (stamped on by the layout) overrides them. Channels are space-separated RGB so Tailwind's `/ ` works. */ :root { --brand-ocean: 1 71 95; --brand-pine: 1 58 55; --brand-lime: 169 220 21; --brand-leaf: 139 197 64; --brand-green: 67 172 71; --brand-mint: 66 205 152; --brand-mist: 209 244 209; --brand-cream: 252 248 245; --gradient-soft: linear-gradient(135deg, #FCF8F5 0%, #D1F4D1 100%); --gradient-ocean: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #01475F 0%, #013A37 100%); --gradient-sea: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #01475F 0%, #42CD98 100%); --gradient-leaf: linear-gradient(135deg, #8BC540 0%, #43AC47 100%); } .brand-planifi { --brand-ocean: 30 64 175; --brand-pine: 30 58 138; --brand-lime: 56 189 248; --brand-leaf: 59 130 246; --brand-green: 37 99 235; --brand-mint: 14 165 233; --brand-mist: 219 234 254; --brand-cream: 248 250 252; --gradient-soft: linear-gradient(135deg, #F8FAFC 0%, #DBEAFE 100%); --gradient-ocean: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #1E40AF 0%, #1E3A8A 100%); --gradient-sea: radial-gradient(700px circle at 0% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 58%), linear-gradient(135deg, #1E40AF 0%, #0EA5E9 100%); --gradient-leaf: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); } @layer base { body { @apply font-sans bg-brand-cream text-slate-900; } h1, h2, h3 { @apply font-display; } h4, h5, h6 { @apply font-subhead font-bold; } } @layer utilities { .h-app { height: var(--app-height, 100dvh); } } /* Sticky right-edge table column (punchlist #50, 2026-07-17). Keeps a wide admin index table's Actions column pinned to the right edge so View/Edit/Delete is always reachable without horizontal scrolling — which means you never scroll the row's identity (e.g. the plan name) out of view to reach it. Apply the `col-sticky-right` class to BOTH the Actions and each Actions inside a horizontally-scrolling table (the `overflow-auto` wrapper). This is plain CSS (not an @apply utility) so it's never purged; adding it here also forces assets:precompile on deploy (see the Heroku rebuild gotcha above). */ .col-sticky-right { position: sticky; right: 0; z-index: 10; background-color: #ffffff; box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12); } tr:hover > td.col-sticky-right { background-color: #f9fafb; /* gray-50 — matches the row hover tint */ } thead .col-sticky-right { z-index: 30; /* wins the top-right corner over the sticky thead (z-20) */ background-color: #f9fafb; /* gray-50 — matches the sticky thead background */ } /* Sticky left-edge table column (Task 13 review fix). Symmetric to col-sticky-right above — pins a row-identity column (e.g. Plan) to the left edge of a horizontally-scrolling table so it never scrolls out of view while reaching filters/data further right. Apply the `col-sticky-left` class to BOTH that column's and each of its s. */ .col-sticky-left { position: sticky; left: 0; z-index: 10; background-color: #ffffff; box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.12); } tr:hover > td.col-sticky-left { background-color: #f9fafb; /* gray-50 — matches the row hover tint */ } thead .col-sticky-left { z-index: 30; /* wins the top-left corner over the sticky thead (z-20) */ background-color: #f9fafb; /* gray-50 — matches the sticky thead background */ } /* @layer components { .btn-primary { @apply py-2 px-4 bg-blue-200; } } */