/* ============================================================================ * Workplace Planner — Phase-2 RBAC client styles * ---------------------------------------------------------------------------- * Visual states applied by `static/js/permissions.js` to elements gated * by data-perm directives. Kept tiny and dependency-free so any page that * pulls the universal nav also picks these up. * =========================================================================*/ /* Elements that have been hidden by the RBAC runtime are kept inert: no * pointer events, no tab-focus. We don't override `display: none` here * because the runtime uses `style.display = none` directly; this rule is * a belt-and-braces against children that try to claw their way back. */ .rbac-hidden, .rbac-hidden * { pointer-events: none !important; } /* `data-perm-mode="disable"` style: the element is left in the layout but * grayed out and click-blocked. The :disabled pseudo-class handles native * inputs; for anchors and divs we add an explicit class. */ .rbac-disabled, .rbac-denied { opacity: 0.55 !important; cursor: not-allowed !important; user-select: none; filter: grayscale(0.4); } .rbac-disabled, .rbac-denied, .rbac-disabled *, .rbac-denied * { pointer-events: none !important; } /* Anchors with mode=disable -- restore visual hierarchy with a muted tint. */ a.rbac-disabled, a.rbac-denied { color: var(--bs-secondary, #6c757d) !important; text-decoration: line-through !important; } /* While the engine is still hydrating, hide elements that have ANY * data-perm-* directive so we never flash the "before-RBAC" state on * first paint. The runtime removes this class as soon as it has a * decision. Pages can opt-in by adding `class="rbac-pending"` on * or any wrapper; we don't apply it globally because some * pages need a flash-of-content for unauthenticated users. */ html.rbac-pending [data-perm], html.rbac-pending [data-perm-any], html.rbac-pending [data-perm-all], html.rbac-pending [data-perm-admin] { visibility: hidden !important; }